Vue 打包下载图片（优选）

npm install jszip   

https://www.npmjs.com/package/file-saver
npm install file-saver


2、在所需页面中引入

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

3.打包

    StoreDowQrcode(arr, blogTitle) {
      var zip = new JSZip();
      var imgs = zip.folder(blogTitle);
      var baseList = [];
      var _this = this;
      arr.forEach((item, index) => {
        var image = new Image();
     
        image.setAttribute("crossOrigin", "anonymous");
        image.onload = function() {
          var canvas = document.createElement("canvas");
          canvas.width = image.width;
          canvas.height = image.height;

          var context = canvas.getContext("2d");
          context.drawImage(image, 0, 0, image.width, image.height);
          var url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
          baseList.push({ name: item.name + index, 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) {
                FileSaver.saveAs(content, blogTitle + ".zip");
              });
            } else {
              _this.$notify.error({
                title: "错误",
                message: "暂无图片可下载"
              });
            }
          }
        };
           image.src = item.url;
      });
    }

      let qcode = [];
      multipleSelection.forEach(item => {
        let img = {
          name: item.description,
          url: item.videos[0].qr_code
        };
        qcode.push(img);
      });

      this.StoreDowQrcode(qcode, "视频二维码");