pdf, ppt, xls 등의 파일 확장자에서는 정상적으로 다운로드 되지만 csv 일 때 다운로드 실패하는 경우가 발생했다.
log를 찍어보니 csv는 response 형식이 달랐고😧 Blob 인스턴스로 감싸주니 정상적으로 다운로드가 됐다.
임시방편으로 오류는 해결했지만 더 나은 방법을 찾아봐야겠다😿
- 문제가 된 이전 소스
export const fileDownload = async (fileUrl, fileName) => {
await $fetch(fileUrl).then((blob) => {
const a = document.createElement('a');
a.href = window.URL.createObjectURL(blob);
a.download = fileName;
a.click();
});
};
- 수정 소스
export const fileDownload = async (fileUrl, fileName) => {
await $fetch(fileUrl).then((blob) => {
if (fileName.split('.')?.pop()?.toLowerCase() === 'csv') {
blob = new Blob([blob], { type: 'text/csv' });
}
const a = document.createElement('a');
a.href = window.URL.createObjectURL(blob);
a.download = fileName;
a.click();
});
};
- 개념 정리에 좋은 블로그
- 참고한 사이트
https://developer.mozilla.org/en-US/docs/Web/API/Response/blob
Response: blob() method - Web APIs | MDN
The blob() method of the Response interface takes a Response stream and reads it to completion. It returns a promise that resolves with a Blob.
developer.mozilla.org
https://zzang9iu.tistory.com/42
통신값에서 받은 blob 다운로드 처리(.fetchAPI 이용)
프로젝트를 진행하면서 API통신을 이용해 BLOB값을 받아 파일을 다운로드 할 필요가 있었다. 보통 JQUERY AJAX통신을 이용하여 API를 진행하였다. 예를 들어 $.ajax({ url:'example.php' // 요청 할 주소 async:tr
zzang9iu.tistory.com
[JavaScript] CSV 생성 및 다운로드
1. 다운로드 버튼 클릭 이벤트 $("#excelDownload").click(function () { let filename = "testFile.csv"; getCSV(filename); }); 2. CSV 생성 함수 function getCSV(filename) { var csv = []; var row = []; //1열에는 컬럼명 row.push( "열 제목1"
mchch.tistory.com
'개발 > JavaScript' 카테고리의 다른 글
| [JS] JWT 디코딩 문제 (0) | 2023.12.28 |
|---|---|
| [JS] Video 태그 자동재생 (0) | 2023.12.12 |