-
第一步先处理重名的数据 ,
解决方法 :将相同名字的图片或文件后面加后缀数字作为区分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;
}
用JSZip,FileSaver 有现成cdn的http图片或者文件地址,弄成压缩包导出,解决如果文件名字都是一样的只导出一个图片或文件的方法
烂笔头12024-07-02 1:35
相关推荐
Mr_Xuhhh41 分钟前
重生之我在学环境变量永乐春秋2 小时前
WEB攻防-通用漏洞&文件上传&js验证&mime&user.ini&语言特性鸽鸽程序猿2 小时前
【前端】CSSggdpzhk2 小时前
VUE:基于MVVN的前端js框架小曲曲3 小时前
接口上传视频和oss直传视频到阿里云组件学不会•4 小时前
css数据不固定情况下,循环加不同背景颜色EasyNTS5 小时前
H.264/H.265播放器EasyPlayer.js视频流媒体播放器关于websocket1006的异常断连活宝小娜6 小时前
vue不刷新浏览器更新页面的方法程序视点6 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!coldriversnow6 小时前
在Vue中,vue document.onkeydown 无效