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