axios로 파일 다운로드 구현하기

javascript
,

공개적인 파일의 경우 다운로드를 a 요소로 구현하나, 보안상의 목적 등을 위해 Rest API를 이용하여 다음과 같은 방식으로도 구현이 가능하다.

1
2
<!-- 일반적인 형태 -->
<a href="fileName.xls">
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// Rest API
const downloadFile = (params, headers) => {
  axios.post(`${baseUrl}download`, params, { headers, responseType: 'blob' })
    .then(response => {
      // Blob 생성자 함수로 URL 생성하여 할당
      const url = window.URL.createObjectURL(new Blob([response.data]))
      // <a> 요소 동적 생성
      const link = document.createElement('a')
      // <a> 요소에 href attribute에 url 할당
      link.href = url
      // <a> 요소에 download attribute 와 value 동적 할당
      link.setAttribute('download', 'fileName.xls')
      // body 요소의 직계 자식으로 삽입 후 클릭
      document.body.appendChild(link)
      link.click()
    })
    .catch(e => {
      console.error(e)
    })
}

downloadFile('Insert request body argument', 'Insert request header argument')
Share Comments