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

相关推荐
前端九哥2 分钟前
🚀 新一代图片格式 AVIF,对比 WebP/JPEG 有多强?【附真实图片对比】
前端
谦谦橘子3 分钟前
服务端渲染原理解析姐妹篇
前端·javascript·react.js
i编程_撸码4 分钟前
webpack详细打包配置,包含性能优化、资源处理...
前端
小小小小宇5 分钟前
React 中 useMemo 和 useCallback 源码原理
前端
Trae首席推荐官9 分钟前
Trae 版本更新|支持自定义智能体、MCP等,打造个人专属“AI 工程师”
前端·trae
木三_copy9 分钟前
前端截图工具--html2canvas和html-to-image的一些踩坑
前端
小桥风满袖11 分钟前
Three.js-硬要自学系列7 (查看几何体顶点位置和索引、旋转,缩放,平移几何体)
前端·css·three.js
kim__jin13 分钟前
Vue3 使用项目内嵌iFrame
前端
独立开阀者_FwtCoder26 分钟前
# 一天 Star 破万的开源项目「GitHub 热点速览」
前端·javascript·面试
天天扭码37 分钟前
前端进阶 | 面试必考—— JavaScript手写定时器
前端·javascript·面试