VUE图片下载 针对png格式的 单个下载图片 多个图片下载压缩包

引入文件 

import JSZip from "jszip";
import FileSaver from "file-saver";
import AdminApi from "@/api/export";

png文件

   downLoad (val) {
      this.imgLoading = true;
      electronicList({ invoiceId: val.id })
        .then((res) => {
          if (res.data.length == 1) { 
　　　　　　　//单个png下载
            let link = document.createElement('a')
            let url = res.data[0].filePath //图片路径
            // 这里是将url转成blob地址，
            fetch(url).then(res => res.blob()).then(blob => { // 将链接地址字符内容转变成blob地址
              link.href = URL.createObjectURL(blob)
              link.download = res.data[0].fileName //文件名字
              document.body.appendChild(link)
              link.click()
            })
          } else {
　　　　　　　//多个文件夹里面包含png文件
            let blogTitle = "电子发票";
            let zip = new JSZip();
            let imgs = zip.folder(blogTitle);
            let baseList = [];
            let arr = res.data;
            let exportImg = arr.map((item, index) => {//数组对象
              return {
                renameFileName: `${index + 1}_${item.fileName}`, //加索引值防止文件名重复（文件名重复只会下载一个）
                fileUrl: item.filePath
              };
            })
            this.imgLoading = false;
            this.filesToRar(exportImg, '电子发票')
          }
        })
        .catch((e) => {
          this.imgLoading = false;
        });
    },
    /**文件打包
    * arrImages: 文件list: [{ fileUrl: 文件url, renameFileName: 文件名 }]
   * filename 压缩包名
   * */
    filesToRar (arrImages, filename) {
      let _this = this;
      let zip = new JSZip();
      let cache = {};
      let promises = [];
      _this.title = '正在加载压缩文件';
      for (let item of arrImages) {
        const promise = _this.getImgArrayBuffer(item.fileUrl).then(data => {
          // 下载文件, 并存成ArrayBuffer对象(blob)
          zip.file(item.renameFileName, data, { binary: true }); // 逐个添加文件
          cache[item.renameFileName] = data;
        });
        promises.push(promise);
      }
      Promise.all(promises).then(() => {
        zip.generateAsync({ type: "blob" }).then(content => {
          _this.title = '正在压缩';
          // 生成二进制流
          FileSaver.saveAs(content, filename); // 利用file-saver保存文件 自定义文件名
          _this.title = '压缩完成';
        });
      }).catch(res => {
        _this.$message.error('文件压缩失败');
      });
    },