vue 批量下载图片（自动压缩之后下载）

标题 vue 批量下载图片（自动压缩之后下载）

效果图：


之前写的时候找到的别人的方法 觉得很好用 就保存下来之后改造了一下 亲测有效：
话不多说直接代码：

html代码：

 <!-- 我这个是在表格中的html  -->
 </el-table-column>
          :label="$t('abnormalList[9]')"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span class="downloadImg"
              @click="handleDownloadQrIMg(scope.row)"
              >图片下载</span
            >
          </template>
        </el-table-column>

//先下载两个插件
npm install jszip --S --D
npm install file-saver --S --D
或者用yarn add 这两个也是一样的效果
在文件中引入插件

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

//data中加一个
	imgList: []
//方法中写入 主要内容
// 批量下载图片
    handleDownloadQrIMg(row) {
      //每次进来清空数组  否则会出现上一次图片不清空的问题
      this.imgList = []
      //把5张图片传进来
      let imageList = [row.img1, row.img2, row.img3, row.img4, row.img5];
      imageList.forEach((item) => {
        if (item != "") {
          this.imgList.push(item);
        }
      });
      //压缩包名
      var blogTitle = "打包图片";
      var zip = new JSZip();
      var imgs = zip.folder(blogTitle);
      var baseList = [];
      // 要下载图片的url
      var arr = this.imgList;
      // 下载后图片的文件名，个数应与arr对应
      var imgNameList = ["图片1", "图片2", "图片3", "图片4", "图片5"];
      for (var i = 0; i < arr.length; i++) {
        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编码数据
          canvas.toDataURL("image/png");
          baseList.push(url.substring(22)); // 去掉base64编码前的 	data:image/png;base64,
          if (baseList.length === arr.length && baseList.length > 0) {
            for (let k = 0; k < baseList.length; k++) {
              imgs.file(imgNameList[k] + ".png", baseList[k], { base64: true });
            }
            zip.generateAsync({ type: "blob" }).then(function (content) {
              // see FileSaver.js
              FileSaver.saveAs(content, blogTitle + ".zip");
            });
          }
        };
        image.src = arr[i];
      }
      //下载单张图片
      // var link = document.createElement("a");
      // link.download = 'aaa'; //图片文件名
      // link.href = row.img1 //文件地址
      // link.click();
      // link.remove();
    },

之前在这里看到的之后用到自己的代码中：
链接: https://www.jb51.net/article/197884.htm