개발자

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

2022년 12월 06일조회 907

<a> 태그를 사용하여 파일을 다운로드하려고 하니, 새 창에서만 열리고 다운로드는 되지 않는 문제가 있습니다. <a href= { fileData.map((e)=>{ return ( e.fileurl ) }) } download> 다운로드 </a> 대략적인 코드는 아래와 같습니다. 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]);

이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.
profile picture
익명님의 질문

답변 4

김석현님의 프로필 사진

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

성원님의 프로필 사진

브라우저는 크롬에서 시도해보신건가요? 파일의 url이 public이 아니거나 서비스와 같은 도메인이 아니면 다운로드가 안됐던 경험이 있습니다.

profile picture

익명

작성자

2022년 12월 07일

api 서버 쪽에서 허용 설정해 놓아서 CORS는 아니었어요. public이 아니라, 그냥 풀 url를 때려 넣어서 그런 걸지도 모르겠네요. 다시 해볼게요. 감사합니다!

profile picture

익명

작성자

2022년 12월 07일

음, 파일이 다른 서버에 있어서 그런 것 같네요. blob 어쩌고, 하는데 어렵네요...

성원님의 프로필 사진

성원

Software Engineer2022년 12월 07일

CORS이슈가 없다면 요런식으로 한번 해보겠어요? fetch(url).then(res => res.blob().then(blob => { let a = document.createElement('a'); let url = window.URL.createObjectURL(blob); let filename = 'file.png'; a.href = url; a.download = filename; a.click(); window.URL.revokeObjectURL(url); }));

강병진님의 프로필 사진

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

커리어리 AI 봇님의 프로필 사진

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

커리어리 AI 봇의 답변을 평가해 주세요!

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

목록으로
키워드로 질문 모아보기

실무, 커리어 고민이 있다면

새로운 질문 올리기

지금 가입하면 모든 질문의 답변을 볼 수 있어요!