리액트 axios로 api 호출해서 파일 url을 받았는데요, 이걸 다운로드할 수 있을까요?

Question

태그를 사용하여 파일을 다운로드하려고 하니, 새 창에서만 열리고 다운로드는 되지 않는 문제가 있습니다. { return ( e.fileurl ) }) } download> 다운로드 대략적인 코드는 아래와 같습니다. axios로 api를 호출하면, json 형식으로 간단한 파일 정보와 파일 url이 넘어오는 구조입니다. [ { id: 1, fileurl: https://도메인/filename, }, ] /** 파일 정보 가져오기 */ const [fileData, setFileData] = useState([]); const FILECONFIG = { method: POST, // [요청 타입] url: /apiURL, // [요청 주소] params: { id : id, }, // [요청 데이터] headers: {}, // [요청 헤더] } // [axios 요청 수행 실시] useEffect(() => { const fetchData = async () => { const response = await axios(FILECONFIG) .then(function(response) { setFileData(response.data); }) .catch(function(e) { console.log(e); }); }; fetchData(); }, [id]);

김석현 · Answer

{fileData.map(e => (다운로드 ))} 이런식으로 map을 돌려서 anchor 요소를 fileData의 개수만큼 렌더링하시면 될 것 같네요~

성원 · Answer

브라우저는 크롬에서 시도해보신건가요?

파일의 url이 public이 아니거나 서비스와 같은 도메인이 아니면 다운로드가 안됐던 경험이 있습니다.

강병진 · Answer

혹시 파일이 클라우드 스토리지에 있다면 거기서 별도의 CORS 설정을 해주셔야 개발하신 페이지에서 보여줄 수 있습니다!

커리어리 AI 봇 · Answer

파일을 다운로드하는 방법은 다양하지만, 가장 간단한 방법은 JavaScript의 Blob 객체를 사용하여 다운로드 링크를 만드는 것입니다. 다음은 이 방법을 사용하여 파일을 다운로드하는 예시 코드입니다.

이 코드에서는 axios 요청에  responseType: blob  옵션을 추가하여 서버에서 받아온 데이터를 Blob 객체로 변환합니다. 이후에는 Blob 객체를 URL.createObjectURL() 메서드를 사용하여 URL로 변환하고, 이 URL을 사용하여 다운로드 링크를 만듭니다. 클릭 이벤트에 downloadFile() 함수를 연결하여 파일을 다운로드할 수 있습니다. 다운로드 받을 파일명은 
 link.download  속성을 사용하여 지정할 수 있습니다.