[JS] 자바스크립트로 zip파일 생성하기 (JSZip 라이브러리)

 

JSZIP 라이브러리는 브라우저나 Nodejs에서 ZIP 압축파일을 만들 수 있게 해줍니다.

다운로드 기능은 file-saver 라이브러리를 사용해도 되고, a태그를 만들어서 사용해도 됩니다.

 

JSZip 다운로드

1. 아래 링크를 열어줍니다.

https://stuk.github.io/jszip/

JSZip

 

2.이미지와 같이 download JSZip을 클릭해 다운로드 받습니다.

3. 다운로드된 zip파일의 압축을 풀어줍니다.

 

 

4. dist 안에 jszip.js 파일이나 jszip.min.js파일을 원하는 경로 안에 복사하여 사용합니다.

\Stuk-jszip-v3.10.1-1-g2ceb998\Stuk-jszip-2ceb998\dist\

 

JSZip 사용방법

var zip = new JSZip();
zip.file("Hello.txt", "Hello World\n");
var img = zip.folder("images");
img.file("smile.gif", imgData, {base64: true});
zip.generateAsync({type:"blob"})
.then(function(content) {
    // see FileSaver.js
    saveAs(content, "example.zip");
});

 

var zip = new JSZip();:

JSZip 라이브러리의 새로운 인스턴스를 생성합니다.

 

zip.file("Hello.txt", "Hello World\n");:

이 줄은 "Hello.txt"라는 새 파일을 zip 에 추가합니다.

파일의 내용은 "Hello World\n"입니다.

 

var img = zip.folder("images");:

ZIP 내부에 "images"라는 이름의 새 폴더를 만듭니다.

 

img.file("smile.gif", imgData, {base64: true});:

이 줄은 "images" 폴더 안에 "smile.gif"라는 이름의 새 파일을 추가합니다.

파일의 내용은 imgData변수를 통해 제공되며, 이 변수는 base64 형식의 이미지 데이터를 포함하는 것으로 가정합니다.

이 옵션은 실제로 base64 인코딩임을 {base64: true}지정합니다 

 

zip.generateAsync({type:"blob"}):

ZIP 아카이브를 비동기적으로 생성합니다. 이 type:"blob"옵션은 생성된 아카이브가 Blob 객체로 반환되어야 함을 지정합니다. Blob 객체는 바이너리 데이터 스트림을 나타내는 데이터 유형입니다.

 

.then(function(content) { ... });:

ZIP 아카이브가 성공적으로 생성된 후 실행되는 약속 핸들러입니다.

content매개변수는 ZIP 아카이브 데이터를 포함하는 생성된 Blob 객체를 나타냅니다.

 

saveAs(content, "example.zip");:

이 줄은(FileSaver.js 라이브러리를 사용한다고 가정) 생성된 ZIP 아카이브를

"example.zip"이라는 이름의 파일로 사용자의 장치에 저장합니다.

 

 

 

자세한 사용방법은 아래 링크들을 참고하면 됩니다.

https://stuk.github.io/jszip/documentation/examples.html

How to use JSZip

https://stackoverflow.com/questions/8608724/how-to-zip-files-using-javascript

How to Zip files using JavaScript?

 

https://rebornbb.tistory.com/entry/JS-%EB%8B%A4%EC%9A%B4%EB%A1%9C%EB%93%9C-%EA%B8%B0%EB%8A%A5-a-%ED%83%9C%EA%B7%B8-download-%EC%86%8D%EC%84%B1

[JS] 다운로드 기능 - a 태그 download 속성