JSZip庫的簡單使用

 

 

JSZip

jszip是一個用於創建、讀取和編輯.zip文件的JavaScript庫，且API的使用也很簡單。

安裝

npm install jszip

需用到jszip/dist下的jszip.min.js文件以及jszip/vendor下的FileSaver.js文件

引入

將js文件放到jszip文件夾下

 <script src="jszip/jszip.min.js"></script> <script src="jszip/FileSaver.js"></script>><!--用於文件下載--> 

官方示例

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"); }); 

• 創建一個JSZip實例：

var zip = new JSZip(); 

• 使用.file(fileName,fileContent)添加一個txt文件

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

• 使用.folder(folderName)添加一個文件夾

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

• 使用.file(fileName,fileContent,base64FLag)在文件夾下添加一個圖片文件

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

注：fileContent可以是File文件也可以是Blob二進制數據

• 生成一個zip文件

zip.generateAsync({type:"blob"}) .then(function(content) { // see FileSaver.js saveAs(content, "example.zip"); }); 

type:"blob" 壓縮的結果為二進制流,可用作文件上傳
saveAs(content, "example.zip"); 直接在瀏覽器打成example.zip包並下載，saveAs依賴的js是FileSaver.js