티스토리 뷰

Axios 를 통해서 파일 다운로드 하기.

 

//response blob or arraybuffer

this.$axios({
  method: 'post',
  url: url,
  responseType: 'blob',
  data: paramter
}).then(res => {
	//header content-disposition에서 filename 추출.
    const name = res.headers['content-disposition'].split('filename=')[1]
    
    //IE11에서 blob처리 오류로 인해 분기처리
    if (window.navigator && window.navigator.msSaveOrOpenBlob) {
      const blob = res.data
      window.navigator.msSaveOrOpenBlob(blob, name)
    } else {
    	//IE 이외 다운로드 처리
      const url = window.URL.createObjectURL(new Blob([res.data], { type: res.headers['content-type'] }))
      const link = document.createElement('a')
      link.href = url
      link.setAttribute('download', name)
      document.body.appendChild(link)
      link.click()
      delete link;
    }
}).catch(error => {
	//error
})

 

axios에서 blob (블롭) 을 이용하여 파일다운로드 구현 할 수 있다.

blob은 IE10 이상에서 지원된다.

developer.mozilla.org/ko/docs/Web/API/Blob

 

Blob - Web API | MDN

Blob Blob 객체는 파일류의 불변하는 미가공 데이터를 나타냅니다. 텍스트와 이진 데이터의 형태로 읽을 수 있으며, ReadableStream으로 변환한 후 그 메서드를 사용해 데이터를 처리할 수도 있습니다.

developer.mozilla.org

※ reseponse.header에서 Content-Disposition 객체를 찾을 수 없을 떄.

CORS 때문에 헤더에 Contents-Disposition내 filename이 있어도 값을 사용할 수 없을 수 있다.

해당의 경우 서버에서 allow-content-expose-headers 를 추가하여 사용할 수 있다.

 

//php
header('Access-Control-Expose-Headers: Content-Disposition');

//java
@RestController
@RequestMapping("/api/files")
@CrossOrigin(value = {"*"}, exposedHeaders = {"Content-Disposition"})
public class FileBoundary {
   // code ...
}

//node
app.use(cors({
  origin: 'http://localhost:8080',
  credentials: true,
  exposedHeaders: ['Content-Disposition']
}))

참조 : 1004lucifer.blogspot.com/2019/04/axios-response-headers-content.html

 

[Axios] Response Headers의 Content-Disposition 항목이 없는 이슈

Axios를 이용해 파일다운로드 모듈 제작중 서버에서 받아온 파일명을 처리하던중에 아래와 같이 서버에서 Content-disposition 헤더를 받았는데 Axios의 Response 객체에는 담겨있지 않는 이슈가 발생했다

1004lucifer.blogspot.com

 

댓글