- 第一步先处理重名的数据 ，
解决方法 ：将相同名字的图片或文件后面加后缀数字作为区分
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;
}
