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

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

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: '图片二' } ]
引入

import JSZip from "jszip";
import FileSaver from "file-saver";
点击导出按钮，压缩包导出

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;
}