title: vue下将图片打包为zip进行下载 date: 2019-03-23 13:24:18 tags: CSDN迁移

需要使用到的技术：

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

使用函数，上代码

传入数据格式如下：

[{name:"你的图片名称，不能重复",baseImg:"后端传输给你的base64图片"}]

 //批量下载门店二维码转化
StoreDowQrcode(arr, blogTitle = "二维码") {
  var zip = new JSZip();
  var imgs = zip.folder(blogTitle);
  var baseList = [];
  var _this = this;
  //var arr = ["/images/bg.png", "/images/bg1.png"];
  for (var i = 0; i < arr.length; i++) {
    //console.log(arr[i].name);
    let name = arr[i].name; //图片名称
    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].baseImg = `data:image/png;base64,${arr[i].baseImg}`;
  }
}

使用：

 this.StoreDowQrcode(newarr);

上图代码中使用的技术主要为jszip，FileSaver.js，提示代码是elementUI所提供的组件

代码其实是拷贝的这个大神的博客中的代码，不是自己原创，但是修改了他所不是很明确的地方，根据我的博客是可以直接使用，不需要多余处理。这要是还不会用，那我也没有办法了。

本文参考链接：

博客：https://blog.csdn.net/haidong55/article/details/86503573

FileSaver：https://www.cnblogs.com/yunser/p/7629399.html

jszip：https://stuk.github.io/jszip/