Spring 파일 다운로드시 React에서 받아오면 data가 깨지는 현상

Question

안녕하세요 선배님들 파일아이디를 요청해서 파일을 받아오는 프로그램을 작성했습니다 받아와서 saveAs를 이용해서 다운을 받는데 data가 data: &#34;&#xfffd;PNG
\u001a
\u0000\u0000\u0000IHDR\u0000\u0000	&#xfffd;\u0000\u0000\u0004z\b\u0006\u0000\u0000\u0000&#xfffd;س]\u0000\u0000\fliCCPICC Profile\u0000\u0000H&#xfffd;&#xfffd;W\u0007XS&#xfffd;\u0016&#xfffd;[RIh\u0001\u0004&#xfffd;&#xfffd;&#xfffd;\u0004&#xfffd;\u001a&#64;J\b-&#xfffd;&#xfffd;\&#34;&#xfffd;\bI &#xfffd;Ę\u0010T&#xfffd;eQ&#xfffd;&#xfffd;&#xfffd;\b&#xfffd;&#xfffd;U\u0011Ŷ\u0002bǮ,&#xfffd;&#xfffd;/\u0016T&#xfffd;uQ\u0017\u0 이런식으로 꺠져있어요 ㅜ 추가로 궁금하시거나 방법 아시면 알려주세요 ! 파일 받아올때 이런식으로 받아옵니다.

컴포지트 · Accepted Answer

base64 변환 비용 무시할 수 없으니까요.a 태그 당연히 GET 밖에 안 됩니다.그래서 메소드 처리 원하면 form 태그 만들어서 폼전송 쓰세요.

컴포지트 · Answer

두가지 중 한 가지를 수행하세요.백엔드인 Spring 에서 Base64 데이터를 뱉어내거나 (그다지 비추)아니면 ajax 같은 거라면 결과물은 분명 blob 으로 받을 테니 아래와 같이 data:uri 변환 후 다운로드를 유도하는 방법도 있겠죠. const url &#61; window.URL.createObjectURL(blob); const a &#61; document.createElement('a'); a.style.display &#61; 'none'; a.href &#61; url; // 다운받을 파일 이름 입력 a.download &#61; 'image.png'; document.body.appendChild(a); a.click(); window.URL.revokeObjectURL(url); document.body.removeChild(a);근데 ajax를 꼭 써야 한다면 a 태그를 이식해서 다운로드를 유도하는 방법밖에 없습니다. 이게 싫다면 ajax 대신 그냥 통짜로 다운로드 URL을 링크에 집어넣어 클릭을 유도하거나 전통 폼전송으로 날리면 됩니다.

BellBoi · Answer

컴포지트님 Base64를 비추하시는 이유는 뭔가요?a 태그를 이용한 다운로드는 가능했습니다 근데 request 후 response 받는 과정에서 기존 post 나 get 메소드는백엔드 처리가 끝난뒤 어떠한 이벤트를 줄 수 있었는데a태그를 사용하니 url만 던져줘서 끝난뒤 메서드 처리가 어렵더라구요.. 혹시 방법 있을까요?

Spring 파일 다운로드시 React에서 받아오면 data가 깨지는 현상

3개의 답변

#inputstream 목록