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

第一步，先处理同名的数据。

解决办法：给同名的图片或文件添加后缀编号，以区分。

let arr=[{name:\’照片1\’,url:\’http://cdn\’}, {name:\’照片1\’,url:\’http://cdn\’}, {name:\’照片2\’,url:\’http://cdn\’}];

//创建一个对象来跟踪找到的名字及其数量

名称计数={};

//遍历数组并更新对象

arr.forEach((obj, 索引)={

//如果当前对象的名称在nameCounts中，则说明存在重名。

if (nameCounts[obj.name]) {

//增加计数，更新对象的name属性，并添加序列号

obj.name=`${obj.name}(${nameCounts[obj.name]})`;

//更新nameCounts中名字对应的计数

nameCounts[obj.name]++;

} 除此之外{

//如果nameCounts没有名字，则初始化为1（但是这个1并没有立即使用）

nameCounts[obj.name]=1;

}

//注意：对于唯一名称，其名称属性不会更改。此外，nameCounts 中的计数不会增加。

});

控制台.log(arr);

//[ { name: \’照片1 (1)\’ }, { name: \’照片1 (2)\’ }, { name: \’照片2\’ } ]

介绍

从“jszip”导入JSZip。

从“文件保护程序”导入文件保护程序。

点击导出按钮导出压缩包

异步向下(){

让zip=new JSZip();

for (让i=0; i this.arr.length; i++) {

让文件=arr[i].url.split(\’.\’);

让fileType=file[file.length – 1];

const 文件名=arr[i].name

//添加DOC、XLS等文件类型

if (fileType.toLocaleUpperCase()===\’PDF\’) {

等待this.getFile(this.arr[i].url).then((res)=zip.file(fileName, res, { binary: true }))

} else { //图片

等待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(内容，文件名);

});

}

},

获取文件（网址）{

返回新的Promise((已解决，被拒绝)={

this.$http({method: \’get\’ , url , responseType: \’arraybuffer\’ }).then((data)=solve(data.data)).catch((error)=raise(\’无法加载PDF : \’ +错误））;

});

},

获取Base64Img（网址）{

返回新的Promise((已解决，被拒绝)={

varbase64=\’\’;

var img=新图像();

img.setAttribute(\’crossOrigin\’, \’匿名\’);

img.onload=()={

Base64=this.canBase64(img);

解决(base64.split(\’,\’)[1]);

};

img.onerror=()=raise(\’加载失败\’); //可能存在跨域失败问题。解决方法和上面一样，使用URL+随机数。

img.src=URL + \’?t=\’ + new Date().getTime();

});

},

可以Base64(img) {

var Canvas=document.createElement(\’canvas\’);

Canvas.width=img.width;

画布高度=图像高度；

var ctx=Canvas.getContext(\’2d\’);

ctx.drawImage(img, 0, 0, img.width, img.height);

var dataURL=Canvas.toDataURL(\’image/png\’);

返回数据URL。

}

#以上是使用JSZip，FileSaver有现成的cdn http图片或文件地址，导出为压缩包，文件名相同时只能导出一张图片或文件的问题解决了。此信息仅供参考，相关信息请以官方公告为准！