[Vue3] 엑셀 다운로드 api 통신하기 ( excel blob )

이슈

api통신으로 excel download를 하는데, 한글이 깨진 형태의 데이터가 내려오고, postman에서 테스트를 해서 다운받기를 누르면 정상적인 엑셀로 나오는데 실제 내가 짠 코드로 열면 알수없는 형식의 파일이라고 떴다.

 

 

해결

1. request 통신 시에  responseType: 'blob'를 넣어주어야한다.
2. 받은데이터를 Blob를 이용하여 변형 한다.
3. 가상 a 태그를 사용하여 a태그의 download기능을 사용하여 다운로드한다.

 

1. request 통신 시에  headers 안에 responseType: 'blob'를 넣어주어야한다.

const result = await this.request({
  ...api,
  responseType: 'blob'
}, options);

 

2. 받은데이터를 Blob를 이용하여 변형 한다.

const blob = new Blob([ blobData ], 
  { type : 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' }
);

 

3. 가상 a 태그를 사용하여 a태그의 download기능을 사용하여 다운로드한다.

const linkEl = document.createElement('a');
linkEl.href = window.URL.createObjectURL(blob);
linkEl.download = `${fileName || 'excel'}`;
linkEl.click();