vue导出二维码图片zip文件

实现效果/压缩包打开

复制代码，更改数据源应该直接可以直接使用。
项目参考：https://blog.csdn.net/qq_32858649/article/details/88759454

• 第三方使用

import JSZip from "jszip";
import FileSaver from "file-saver";

• 模拟数据

QrCodeArray: [ 
"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=40260390,479394635&fm=11&gp=0.jpg",
"https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1581742566,2425542478&fm=26&gp=0.jpg",
"https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=4232908533,2618464709&fm=11&gp=0.jpg"]

• 导出事件

  // 调用
  //daochu() {
    //   this.StoreDowQrcode(this.QrCodeArray);
    // },
    // //批量下载二维码转化
    // StoreDowQrcode(arr, blogTitle = "二维码") {
    //   var zip = new JSZip();
    //   var imgs = zip.folder(blogTitle);
    //   var baseList = [];
    //   var _this = this;
    //   // var arr = this.QrCodeArray;
    //   for (var i = 0; i < arr.length; i++) {
    //     console.log(i+1);
    //     let name = i+1; //图片名称
    //     let image = new Image();
    //     // 解决跨域 Canvas 污染问题
    //     image.setAttribute("crossOrigin", "anonymous");
    //     image.onload = function() {
    //       let canvas = document.createElement("canvas");
    //       canvas.width = image.width;
    //       canvas.height = image.height;
    //       let context = canvas.getContext("2d");
    //       context.drawImage(image, 0, 0, image.width, image.height);
    //       let url = canvas.toDataURL(); // 得到图片的base64编码数据 let url =
    //       canvas.toDataURL("image/png");
    //       baseList.push({name: name,img: url.substring(22) });
    //       if (baseList.length === arr.length) {
    //         if (baseList.length > 0) {
    //           _this.$notify({
    //             title: "成功",
    //             message: "即将下载",
    //             type: "success",
    //           });
    //           for (let k = 0; k < baseList.length; k++) {
    //             imgs.file(baseList[k].name + ".png", baseList[k].img, {
    //               base64: true,
    //             });
    //           }
    //           zip.generateAsync({ type: "blob" }).then(function(content) {
    //             // see FileSaver.js
    //             FileSaver.saveAs(content, blogTitle + ".zip");
    //           });
    //         } else {
    //           _this.$notify.error({
    //             title: "错误",
    //             message: "暂无图片可下载",
    //           });
    //         }
    //       }
    //     };
    //     image.src = arr[i] = `${arr[i]}`;
    //   }
    // },
```使用关键：
QrCodeArray是我自己搞的几张图片数据。
图片名称的前缀我用索引表示，唯一的不能重复。实现后是1.png，2.png......
做的时候没注意，直接注释掉name，导致只有一张图片。