用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: '图片二' } ]
  1. 引入
import JSZip from "jszip";
import FileSaver from "file-saver";
  1. 点击导出按钮 ,压缩包导出
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;
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/753319.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

我的创作纪念日学期总结

&#x1f525;个人主页&#xff1a; Forcible Bug Maker &#x1f525;专栏&#xff1a; 关于博主 目录 &#x1f308;前言&#x1f525;我的期末考试&#x1f525;我的学期总结&#x1f525;对未来的展望&#x1f308;结语 &#x1f308;前言 本篇博客主要内容&#xff1a;博…

maven 打包执行配置(对maven引用的包或者丢进去的包都包含在里面)打成jar包

一 、springboot jar包 maven的pom文件 1 在resources下放了一些文件想打进去jar包 2 在lib下放了其他稀奇古怪jar包文件想打进去jar包 编写如下引入jar <build><!-- 打包名称 --><finalName>${project.artifactId}</finalName><resources><…

在预训练语言模型主流架构

文章目录 编码器-解码器架构因果解码器架构前缀解码器架构在预训练语言模型时代,自然语言处理领域广泛采用了预训练 + 微调的范式,并诞生了以 BERT 为代表的编码器(Encoder-only)架构、以 GPT 为代表的解码器(Decoder-only)架构和以 T5 为代表的编码器-解码器(Encoder-d…

重磅!UOSDN焕新,开启创新之旅!

亲爱的开发者们 经过精心打磨和优化 全新改版的UOSDN&#xff08;统信开发者支持网络&#xff09; 已经正式上线啦&#xff01; 我们致力于为您打造一个更加便捷、高效、富有创意和互动性的开发平台&#xff0c;详情&#x1f449;https://uosdn.uniontech.com/ 以UOSDN作为载…

uni-app 微信小程序开发到发布流程

1. uni-app 微信小程序开发到发布流程 1.1. 新建一个uni-app 项目 1.2. 发行微信小程序 1.3. 微信开发者平台的微信小程序appid 复制进来&#xff08;点击发行&#xff09; 1.4. IDE may already started at port xxxx, trying to connect &#xff08;1&#xff09;关闭微信…

ffmpeg编码图象时报错Invalid buffer size, packet size * < expected frame_size *

使用ffmpeg将单个yuv文件编码转为jpg或其他图像格式时&#xff0c;报错&#xff1a; Truncating packet of size 11985408 to 3585 [rawvideo 0x1bd5390] Packet corrupt (stream 0, dts 1). image_3264_2448_0.yuv: corrupt input packet in stream 0 [rawvideo 0x1bd7c60…

借助AI写代码,使用通义灵码智能编写Java和Vue3项目,在Idea和vscode里用AI写代码

在人工智能技术越来越成熟的当下&#xff0c;好多人说AI会取代程序员&#xff0c;这句话石头哥不知可否。但是有一点可以肯定&#xff0c;会熟练使用Ai&#xff0c;驾驭Ai的程序员肯定不会被时代所淘汰。所以今天石头哥就来教大家如何借助Ai来提升自己的代码编写效率。 一&…

时序(流式)图谱数据仓库AbutionGraph功能介绍-Streaming Graph OLAM Database

AbutionGraph是一款端到端的流式数据实时分析的图谱数据库&#xff0c;实时&#xff08;流式写入实时、高QPS决策分析实时、流式预处理实时&#xff09;表现在&#xff1a; 构建实时查询QPS响应时长与历史数据量无关的图模型&#xff1b;接入流式数据并实时更新图计算指标&…

java和网络安全,哪个就业前景更大?

常年以来&#xff0c;Java一直占据着程序语言的前三名&#xff0c;因此也就成了许多进入IT行业的首选语言。但随着5G时代的兴起&#xff0c;网络安全也成了当今最火热的“风口行业”。导致很多年轻人不知如何选择&#xff0c;一直处于纠结徘徊的状态。下面盾叔就带大家了解一下…

【Qt】QMessageBox 各种对话框的默认显示效果

1. 函数原型 void about(QWidget *parent, const QString &title, const QString &text)void aboutQt(QWidget *parent, const QString &title QString())QMessageBox::StandardButton critical(QWidget *parent, const QString &title, const QString &…

SpringBoot-SpringBoot整合Swagger使用教程(图文介绍,一篇就够了)

前言 日常开发中&#xff0c;接口都是和开发文档相结合的。不论是和前端对接还是三方对接亦或者是接口留档&#xff0c;当我们开发完接口后&#xff0c;都需要去创建对应的接口文档。而修改接口后也要修改相对应的接口文档&#xff0c;但是这个真的很容易疏漏。而且相对于繁重的…

用数组模拟栈实现递归函数模拟

做算法课设时候看到题目要求模拟函数递归时候栈的入栈出栈过程。本来想着直接调用系统递归函数即可&#xff0c;可是发现系统函数栈的空间非常小大约只有3000层&#xff0c;很容易爆栈。于是便有了用栈去模拟递归函数的想法&#xff0c;但是上网查了下貌似相关代码比较少&#…

cartographer从入门到精通(一):cartographer介绍

一、cartographer重要文档 有关cartographer的资料有2个比较重要的网站&#xff0c;我们的介绍也是基于这两个网站&#xff0c;其中会加入自己的一些理解&#xff0c;后续也有一些对代码的修改&#xff0c;来实现我们想完善的功能。 1-Cartographer 2-Cartographer ROS 第1个…

如何使用飞书快捷指令无感记账,ios版

总结 很多人无法长期坚持记账&#xff0c;主要是每次消费需要打开手机软件&#xff0c;一系列繁琐的操作&#xff0c;导致过程中可能就忘了。 今天给大家带来飞书自动记账。 演示视频 点击查看&#xff1a;https://www.douyin.com/video/7312857946382241063 安装 下载快捷…

【java计算机毕设】网上商城系统java MySQL ssm vue html maven项目设计代码源码+文档PPT

1项目功能 2项目介绍 系统功能&#xff1a; 网上商城系统包括管理员、用户俩种角色。 管理员功能包括个人中心模块用于修改个人信息和密码、管理员管理、基础数据管理、论坛管理、商品管理、浏览记录管理、公告信息管理、用户管理、轮播图信息。 用户功能包括个人中心模块用于…

【Pyspark-驯化】spark中高效保存数据到hive表中:stored as PARQUET

【Pyspark-驯化】spark中高效保存数据到hive表中&#xff1a;stored as PARQUET 本次修炼方法请往下查看 &#x1f308; 欢迎莅临我的个人主页 &#x1f448;这里是我工作、学习、实践 IT领域、真诚分享 踩坑集合&#xff0c;智慧小天地&#xff01; &#x1f387; 免费获取相关…

python数据分析与可视化一

公共部分 # 引入数据分析工具 Pandas import pandas as pd # 引入数据可视化工具 Matplotlib import matplotlib.pyplot as plt # 引入数据可视化工具 Seaborn (基于matplotlib) import seaborn as sns # 解决输出时的列名对齐问题 pd.set_option(display.unicode.east_…

短视频利器 ffmpeg (2)

ffmpeg 官网这样写到 Converting video and audio has never been so easy. 如何轻松简单的使用&#xff1a; 1、下载 官网&#xff1a;http://www.ffmpeg.org 安装参考文档&#xff1a; https://blog.csdn.net/qq_36765018/article/details/139067654 2、安装 # 启用RPM …

华强盛网络变压器外部电路如何接线

图一是 华强盛 Hqst 网络变压器工厂19926430038 华强盛电子导读&#xff1a; 网络变压器的外部电路接线通常依赖于其设计和用途。一般来说&#xff0c;网络变压器有多个端口&#xff0c;每个端口可能用于不同的连接或功能。以下是一些可能的接线方式&#xff1a; 1. **主电源…

自研网关架构设计

网关项目 1. 了解网关网关横向对比为什么自研网关 2. 架构设计技术栈技术要点异步化设计使用缓存缓冲合理使用串行化吞吐量为王合适的工作线程 架构图 1. 了解网关 概念 访问数据、业务逻辑或功能的 “前门”负责处理接受和处理调用过程中的所有任务 类型 RESTful APl 使用…