엑셀 다운로드

처음 해보는 엑셀 다운로드다! ㅎㅎ

백앤드에서 엑셀 파일이랑 엑셀 파일명을 response에 담아서 보내주신다고 해서

프론트에서 받아서 다운로드하는 부분을 구현해 봤다

 

그전에!

Blob (Binary Large Object)

대용량의 바이너리를 다룰 수 있는 객체로, 
백앤드에서 엑셀 파일을 만들어서 프론트에 받을 때 Blob객체를 활용하면 된다

 

 

1. api 호출

axiosT.post('/test/excel-download', { ...form },
    {
      responseType: 'blob',
      headers: {
        'Content-Type': 'multipart/form-data',
      },
    },
)

이렇게 결과값으로 온다..!

2. 엑셀 다운로드

api로 호출 결과값으로 Blob 객체를 생성해 준다

 

a 태그를 생성해서 href에 Blob 객체의 url을 넣고 

headers['app-download-filename']에서 파일이름을 가져와 decode 해준다

revokeObjectURL을 이용해 url을 해제시켜주면 끝이다~!

  const blob = new Blob([data], {
    type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
  })
  const blobUrl = URL.createObjectURL(blob)
  const link = document.createElement('a')
  link.href = blobUrl

  const filename = headers['app-download-filename']
    ? decodeURIComponent(headers['app-download-filename'])
    : '엑셀다운로드'
  link.download = filename
  link.click()
  URL.revokeObjectURL(blobUrl)

 

전체 소스

엑셀 다운로드가 많이 사용돼서 별도 함수로 만들어줬다

/**
 * 엑셀 다운로드
 * @param data response의 data
 * @param headers response의 headers
 */
export const downloadExcel = (data: Blob, headers: AxiosResponse['headers']) => {
  console.log(data, headers)
  const blob = new Blob([data], {
    type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
  })
  const blobUrl = URL.createObjectURL(blob)
  const link = document.createElement('a')
  link.href = blobUrl

  const filename = headers['app-download-filename']
    ? decodeURIComponent(headers['app-download-filename'])
    : '엑셀다운로드'
  link.download = filename
  link.click()
  URL.revokeObjectURL(blobUrl)

  successSnackbar('엑셀 다운로드가 완료되었습니다.')
}

+ 추가로 고정된 엑셀 파일을 다운로드해야 한다면

location.href = 엑셀파일 url

 

 

참고자료 - https://www.chaerin.dev/Javascript/excel/