引用站外地址
JZip 官方文档
一个用于创建，读取和编辑.zip文件的JavaScript库
引用站外地址
file-saver 官方文档
是在客户端保存文件的解决方案，非常适合在客户端上生成文件的Web应用

一、安装 JZip 和 file-saver

1
npm install file-saver jszip --save

二、导入

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

三、使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// arr={name:***,url:***}
downloadZip(arr, name = "qrcode") {
      const zip = new JSZip(); // 实例化zip
      const img = zip.folder(name); // zip包内的文件夹名字
      arr.forEach((item) => {
        // arr是含有图片的数据数组
        const basePic = item.url.replace(/^data:image\/(png|jpg);base64,/, ""); // 生成base64图片数据
        img.file(item.name, basePic, { base64: true }); // 将图片文件加入到zip包内
      });
      zip
        .generateAsync({ type: "blob" }) // zip下载
        .then(function (content) {
          saveAs(content, `${name}.zip`); // zip下载后的名字
        });
    },