async downloadZip(event) {
/* JSZIP 객체 생성*/
const zip = new JSZIP();
...
/* sortData : 배열에 정렬된 Object가 담긴 변수 */
/* Server 요청으로 BLOB 생성 */
for (let i = 0; i < sortData.length; i++) {
const json = sortData[i];
const fileName = json.FILE_NAME.split('.');
let fileRes;
let fileBlob;
if (fileName.length > 1) {
fileRes = await fetch('이미지에 접근할 수 있는 URL');
fileBlob = await fileRes.blob();
zip.file(fileName[0] + i + '.' + fileName[1], fileBlob);
}
}
/* ZIP 파일 생성 */
zip.generateAsync({type: 'blob'})
.then((resZip) => {
const a = document.createElement('a');
a.href = URL.createObjectURL(resZip);
a.download = '압축파일명';
a.innerHTML = 'download';
document.body.appendChild(a);
a.click();
/* 메모리 누수 방지 */
URL.revokeObjectURL(a.href);
})
.catch((error) => {
console.log(error);
});
},
fetch를 사용하여 Blob을 만든 후 JSZIP 라이브러리를 통해 압축하는 방식이다.
이 방식은 프로젝트에 JSZip이 있어야만 가능한 것을 참고하자.