前端批量下载文件、图片、打包成压缩包，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的相关文档