개발괘발
339
2019-06-19 10:48:37
7
6126

Spring + Vue.js 사용해서 파일다운로드 하는법


백엔드로는 Spring쓰고 프론트로는 Vue쓰고있는데요

파일업로드는 잘되고

파일다운로드도 파일명까지는 잘뜨는데 txt파일을 제외한 png, img, word문서는 다운이안됩니다.

vue에서 axios를 사용해서 response값받아서 다운로드 구현중인데 도움부탁드립니다 ㅠㅠ


server코드

        response.setContentType("application/octet-stream"); 

    response.setContentLength(fileByte.length); 

    response.setHeader("Content-Disposition", "attachment; filename=" +         URLEncoder.encode(originalName, "UTF-8") + ";");

    response.setHeader("Content-Transfer-Encoding", "binary"); 

    response.setHeader("Content-Type", "application/octet-stream");

    response.setHeader("filename", URLEncoder.encode(originalName, "UTF-8"));

    response.getOutputStream().write(fileByte); 

    response.getOutputStream().flush(); 

    response.getOutputStream().close();


vue 코드

 axios.post(CONFIG.DEV_PROXY_URL + '/manage/filemanager/download/', payload.file)

.then((response) => {
function replaceAll (str, searchStr, replaceStr) {
return str.split(searchStr).join(replaceStr)
}
const url = window.URL.createObjectURL(new Blob([response.data], { type: 'image/png' }))
const link = document.createElement('a')
link.href = url
const filename = replaceAll(decodeURI(response.headers.filename), '+', ' ')
link.setAttribute('download', filename)
document.body.appendChild(link)
link.click()
})
.catch((error) => {
handleException(error)
})


어디가 문제일까요??ㅠㅠ

1
  • 답변 7

  • 멘탈조각
    2k
    2019-06-19 10:57:52

    REST client나 브라우저로는 잘 받아지시나요?

  • 개발괘발
    339
    2019-06-19 11:11:46

    넵 브라우저(크롬)에서도 다운로드창까지 뜨면서 다운로드는 되는데 txt파일을 제외한 다른 확장자파일들은 그안에 내용이 없습니다 ㅠㅠ 예를 들어 png파일을 다운로드하면 아래처럼 사진은 안나오고 저런내용만 나옵니다.

  • 멘탈조각
    2k
    2019-06-19 11:17:28

    HEX에디터로 열어볼 수 있나요? 파일 크기 동일한지도 확인해 보시고요.

    다른 예제들에서는 FileCopyUtils를 쓰는데 Raw stream으로 처리한 이유가 있나요?

  • jeffdev
    2k
    2019-06-19 11:40:31

    저 혹시 파일업로드 소스 좀 보여주실수있나요?프론트랑 받는부분이요~

  • XeO3
    565
    2019-06-19 11:55:35

    responseType: "blob" 을 추가해보세요.

    axios.post(CONFIG.DEV_PROXY_URL + '/manage/filemanager/download/', 
        payload.file, 
        {
            responseType: "blob",
        })


  • 개발괘발
    339
    2019-06-19 13:13:11

    멘탈조각

    HEX에디터가 뭐하는 에디터죠..? 제가잘몰라서..

    크기는 확인해보니까 다르게나옵니다 다운로드받은 파일이 거의 2배 크게 다운받아지네요ㅠ

    왼쪽이 원본이고 오른쪽이 다운로드받은 파일입니다



  • 개발괘발
    339
    2019-06-19 13:20:51

    XeO3 님말대로 responseType에 blob추가하니까 바로 잘됩니다.ㅠㅠㅠ 감사합니다정말 나머지분들도 답변해주셔서 감사합니다!! 


  • 로그인을 하시면 답변을 등록할 수 있습니다.