[JS] JSZip 사용 방법

INO·2022년 3월 11일
2

JavaScript

목록 보기
3/5
post-thumbnail
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이 있어야만 가능한 것을 참고하자.

profile
🎢

0개의 댓글