前端批量下載文件、圖片、打包成壓縮包，JZip和file-saver[轉]

一、安裝JZip和file-saver

cnpm install file-saver jszip --save

 

二、導入

import { saveAs } from 'file-saver'
import * as JSZip from 'jszip';

 

三、使用

download() {
    const zip = new JSZip();   // 實例化zip
    const img = zip.folder("qrCode");   // zip包內的文件夾名字
    this.listOfData.forEach((item) => {  // listOfData是含有圖片的數據數組
        const basePic = item.url.replace(/^data:image\/(png|jpg);base64,/, "");  // 生成base64圖片數據
        img.file(item.name + '的二維碼.png', basePic, { base64: true });  // 將圖片文件加入到zip包內
    })
    zip.generateAsync({ type: "blob" })   // zip下載
      .then(function (content) {
        // see FileSaver.js
        saveAs(content, "二維碼.zip");  // zip下載后的名字
      });
}

 

四、參考資料

1、JZip的相關文檔
2、file-saver的相關文檔