用JSZip，FileSaver 有现成cdn的http图片或者文件地址，弄成压缩包导出，解决如果文件名字都是一样的只导出一个图片或文件的方法

1. 第一步先处理重名的数据 ，
   解决方法 ：将相同名字的图片或文件后面加后缀数字作为区分

   let arr = [{name:'图片一',url:'http://cdn'}, {name:'图片一',url:'http://cdn'}, {name:'图片二',url:'http://cdn'}];

   // 创建一个对象来跟踪已经遇到的名称和它们的计数
   let nameCounts = {};
   // 遍历数组，并更新对象
   arr.forEach((obj, index) => {
   // 如果当前对象的name在nameCounts中存在，说明是重名
   if (nameCounts[obj.name]) {
   // 增加计数，并更新对象的name属性，添加序号
   obj.name = ${obj.name}(${nameCounts[obj.name]});
   // 更新nameCounts中对应name的计数
   nameCounts[obj.name]++;
   } else {
   // 如果name不存在于nameCounts中，则初始化为1（但实际上不会立即用到这个1）
   nameCounts[obj.name] = 1;
   }
   // 注意：对于不重名的name，我们不会更改它们的name属性，也不会增加nameCounts中的计数
   });
   console.log(arr);
   // [ { name: '图片一(1)' }, { name: '图片一(2)' }, { name: '图片二' } ]

2. 引入

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

3. 点击导出按钮 ，压缩包导出

   async down(){
   let zip = new JSZip();
   for (let i = 0; i < this.arr.length; i++) {
   let file = arr[i].url.split(".");
   let fileType = file[file.length - 1];
   const fileName = arr[i].name
   // 文件类型 DOC XLS 等等都可以加进来
   if (fileType.toLocaleUpperCase() === "PDF") {
   await this.getFile(this.arr[i].url).then((res) => zip.file(fileName, res, { binary: true }))
   } else { // 图片
   await this.getBase64Img(this.arr[i].url).then((res) => zip.file(fileName, res, { base64: true }));
   }
   zip.generateAsync({ type: "blob" }).then((content) => {
   let fileName = "批量导出.zip";
   FileSaver.saveAs(content, fileName);
   });
   }
   },
   getFile(url) {
   return new Promise((resolve, reject) => {
   this.$http({ method: "get" , url , responseType: "arraybuffer" }).then((data) => resolve(data.data)).catch((error) => reject("PDF加载失败：" + error));
   });
   },
   getBase64Img(url) {
   return new Promise((resolve, reject) => {
   var base64 = "";
   var img = new Image();
   img.setAttribute("crossOrigin", "Anonymous");
   img.onload = () => {
   base64 = this.canBase64(img);
   resolve(base64.split(",")[1]);
   };
   img.onerror = () => reject("加载失败"); // 这里可能会有跨域失败的问题，解决方案同上，url + 随机数
   img.src = url + "?t=" + new Date().getTime();
   });
   },
   canBase64(img) {
   var canvas = document.createElement("canvas");
   canvas.width = img.width;
   canvas.height = img.height;
   var ctx = canvas.getContext("2d");
   ctx.drawImage(img, 0, 0, img.width, img.height);
   var dataURL = canvas.toDataURL("image/png");
   return dataURL;
   }