批量打印-----jsPDF将图片转为pdf,并合并pdf

注意一、
使用jspdf将图片(jpg/jpeg/png/bmp)转pdf(记为pdfA),得到的pdf(pdfA)和需要合并的pdf(记为pdfB)类型不一致,需要将pdfA转为pdfB类型,才能合并,使用arraybuffer转,具体如下

// pdf--pdfA--是使用jspdf将图片生成的pdf
// file--pdfB--是合并pdf需要的pdf格式
const jsPdfBytes = pdf.output('arraybuffer');
const file = await PDFDocument.load(jsPdfBytes);

注意二、
jspdf 可转pdf的图片类型有jpg、jpeg、png、bpm,
不支持 tif 和 tiff 图片类型

.tif和.tiff格式的文件需要通过安装依赖
“tiff.js”: “^1.0.0”,
也是使用arrayBuffer,将图片格式转为base64,(jpg/jpeg格式,然后将该格式通过jspdf转为pdf文件)

if(x.FILE_TYPE == '.tif' || x.FILE_TYPE == '.tiff' ){const response = await fetch(imgUrl);const buffer = await response.arrayBuffer();const Tiff = require("tiff.js");const tiff = new Tiff({ buffer });imgUrl = tiff.toDataURL();
}

注意三、
async/await 和 new Promise 控制异步任务顺序执行,执行完imgToPdf()方法,再执行合并pdf 方法

注意四、
jspdf 将图片转为pdf,注意图片大小的自适应,可以通过设置图片的最大宽度来控制图片自适应的大小
const imageWidth = 100;

注意五、
因为异步任务执行可能导致批量选择文件的顺序与实际获得的文件顺序不一致,所以获取到的this.pdfFileArr,需要通过id 调整为正确的pdf文件打印顺序

图片转pdf代码:

async imgToPdf(arr) {const promises = [];arr.forEach(async (x)=>{const promise = new Promise(async (resolve,reject)=>{//jsPdf 仅支持JPG/JPEG/PNG/BMP格式,不支持tiflet id = x.IDlet imgUrl = window.URL.createObjectURL(x.FILE)//如果是tif或者tiff文件,需要转化后再进行 图片转pdf操作if(x.FILE_TYPE == '.tif' || x.FILE_TYPE == '.tiff' ){const response = await fetch(imgUrl);const buffer = await response.arrayBuffer();const Tiff = require("tiff.js");const tiff = new Tiff({ buffer });imgUrl = tiff.toDataURL();}const pdf = new jsPDF();//添加header//pdf.text('PDF Header', 10, 10);// 将图片绘制到pdf中const imageWidth = 100; // 设定图片的最大宽度const imageHeight = 0; // 设置为 0,将根据宽度等比例计算高度const img = new Image();img.src = imgUrllet finalWidth = imageWidth;let finalHeight = imageHeight;img.onload = function () {const width = img.width;const height = img.height;// 计算图片适应 PDF 页面的尺寸const aspectRatio = width / height;if (finalHeight === 0) {finalHeight = finalWidth / aspectRatio;} else if (finalWidth === 0) {finalWidth = finalHeight * aspectRatio;}};// 添加图片到 PDFpdf.addImage(imgUrl, 'JPEG', 10, 10, finalWidth, finalHeight, null, 'SLOW')const jsPdfBytes = pdf.output('arraybuffer');const file = await PDFDocument.load(jsPdfBytes);//const blob = new Blob([file], { type: 'application/PDF' })let obj = {ID: id,FILE: file}console.log("执行了------imgToPdf")resolve(obj)}).then((obj)=>{this.pdfFileArr.push(obj)}).catch((error)=>{this.loadLoading = falsealert('错误信息为:'+error)})promises.push(promise);})return Promise.all(promises)},

合并pdf代码

async mergePdf(sortList) {console.log('最终需要合并的pdf数组', sortList)let files = sortList// 创建一个新的PDF文档const mergedPdf = await PDFDocument.create();// 遍历选择的每个文件for (let i = 0; i < files.length; i++) {/**这里为.pdf 文件的遍历操作通过FileReader 读取.pdf文件,转为合并pdf所需要的pdf类型const file = files[i];const url = window.URL.createObjectURL(file)const reader = new FileReader();// 读取文件内容const fileContents = await new Promise((resolve, reject) => {reader.onload = function (event) {resolve(event.target.result);};reader.onerror = function (event) {reject(new Error("文件读取错误。"));};reader.readAsArrayBuffer(file); //blob});// 将PDF文件添加到合并的PDF文档中const pdf = await PDFDocument.load(fileContents);console.log("合并pdf---", pdf)**/const pdf = files[i];const copiedPages = await mergedPdf.copyPages(pdf,pdf.getPageIndices());copiedPages.forEach((page) => {mergedPdf.addPage(page);});}const uint8Array = await mergedPdf.save();let mergeBuffer = Buffer.from(uint8Array);const url = window.URL.createObjectURL(new Blob([mergeBuffer], { type: 'application/pdf;charset=utf-8' }));this.mergePdfUrl = urlconsole.log("pdf合并完成")console.log("新合并的pdf--", url)console.log("新合并的pdf--", mergedPdf)},

将获得的pdf文件url给iframe即可预览,iframe 自带toolbar工具栏打印

<iframe ref="printPdf"  id="printIframe" style="overflow:hidden;filter: Chroma(Color=white);border: none;width: 100%; height: 100%":src="item.url + '#toolbar=0'"></iframe><!-- #view=FitH,top -->

如果自己编写打印接口,可以通过id获取到该iframe,
调起 contentWindow.print() 即可打印该dom元素

document.getElementById('printIframe').contentWindow.print();

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C#与C/C++交互(1)——需要了解的基础知识

【前言】 C#中用于实现调用C/C的方案是P/Invoke&#xff08;Platform Invoke&#xff09;&#xff0c;让托管代码可以调用库中的函数。类似的功能&#xff0c;JAVA中叫JNI&#xff0c;Python中叫Ctypes。 常见的代码用法如下&#xff1a; [DllImport("Test.dll", E…

修改IDEA的idea.vmoptions参数导致IDEA无法打开(ReservedCodeCacheSize)

事发原因 Maven导依赖的时候OOM&#xff0c;因此怀疑是内存太小&#xff0c;尝试修改idea.vmoptions的参数&#xff0c;然后发现IDEA重启后打不开了&#xff0c;卸载重装后也无法打开。。。 实际上如果导包爆出OOM的话应该调整下图参数&#xff0c;不过这都是后话了 解决思路…

【从零开始学习JAVA | 第四十四篇】TCP协议中的握手与挥手

前言&#xff1a; TCP&#xff08;传输控制协议&#xff09;作为计算机网络中的重要协议&#xff0c;扮演着确保数据可靠传输的角色。在TCP的通信过程中&#xff0c;握手与挥手问题是不可忽视的关键环节。握手是指在建立连接时&#xff0c;客户端与服务器相互确认彼此的身份并…

【学习FreeRTOS】第1章——FreeRTOS入门

1.裸机与RTOS介绍 1.1.裸机与RTOS引入&#xff08;举例&#xff09; 设定情景&#xff1a;小明同学一边打游戏一边恢复女友消息&#xff0c;中途突然肚子疼要上医院 裸机的抽象表达 当紧急情况时&#xff0c;如果当前正在打游戏&#xff0c;那么小明只能打游戏和回复信息的流…

Spring 事务管理

目录 1. 事务管理 1.1. Spring框架的事务支持模型的优势 1.1.1. 全局事务 1.1.2. 本地事务 1.1.3. Spring框架的一致化编程模型 1.2. 了解Spring框架的事务抽象&#xff08;Transaction Abstraction&#xff09; 1.2.1. Hibernate 事务设置 1.3. 用事务同步资源 1.3.1…

PHP最简单自定义自己的框架创建目录结构(二)

1、mvc目录结构 2、目录解释 KJ&#xff1a;项目名称 core&#xff1a;框架核心目录 KJ.php 框架运行入口 index: 框架模块 controller:模块控制器 model:模块模型数据库操作 view:页面显示html index.php:index模块框架入口 3、index.php框架入口文件引入框架 <?php r…

【前端】jeecgboot vue3开发过程使用方法整理

【前端】jeecgboot vue3开发过程使用方法整理 //定义变量 let list ref([]) 获取当前用户信息 const { userInfo } useUserStore(); 组件 JDictSelectTag {label: "用户ID",field: userId,component: JDictSelectTag, //默认值defaultValue: userInfo.userId,co…

python 异步IO实践

1、前言 1.1 计算密集型、IO密集型 python因为自身的GIL的问题导致并发不能像java和C一样&#xff0c;但并不是说Python不能实现并发。常见的有两种&#xff1a; 计算密集型 IO密集型 计算密集型 计算密集型任务的特点是要进行大量的计算&#xff0c;消耗CPU资源&#xff0c;比…

虚拟世界探索:科技之下的未来可能性

随着科技的飞速发展&#xff0c;人们对于虚拟世界的憧憬和探索也日益加深。虚拟世界&#xff0c;那是一个超越现实的概念&#xff0c;一个充满想象力和创造力的领域。然而&#xff0c;虚拟世界究竟有可能实现吗&#xff1f;这是一个引人深思的问题。 虚拟世界&#xff0c;首先让…

Java,python,c#,js,c++搞量化交易的接口大全

股票基金api接口地址&#xff1a;https://stockapi.com.cn 不想自己写的&#xff1a;https://stockapi.com.cn 除了牛逼&#xff0c;只剩下牛逼&#xff0c;除了方便&#xff0c;只剩下方便&#xff0c;python不是唯一的量化编程语言 接口说明&#xff1a;日线macd指标 https:/…

Vue.js2+Cesium1.103.0 六、标绘与测量

Vue.js2Cesium1.103.0 六、标绘与测量 点&#xff0c;线&#xff0c;面的绘制&#xff0c;可实时编辑图形&#xff0c;点击折线或多边形边的中心点&#xff0c;可进行添加线段移动顶点位置等操作&#xff0c;并同时计算出点的经纬度&#xff0c;折线的距离和多边形的面积。 De…

mysql死锁分析show engine innodb status

文章目录 1、show engine innodb status命令2、前置知识3、无符号数、有符号数4、innodb关于有符号数的规定5、为什么会有这个规定 1、show engine innodb status命令 最近在使用mysql的show engine innodb status命令分析死锁&#xff0c;发现了一个有意思的点。就是红框里圈…

vue3中使用jsx/tsx写ElMessageBox嵌套ElSelect、ElInput、ElDatePicker

- message: () > h() 必须是函数形式才能update数据。- 简单的 // 绑定参数 const pageData reactive({statusValue: null }) // 更改设备状态弹窗 const openDialogChangeStatus (ids: number[], name: string, doTxt: string) > {console.log(logopenDialogChange…

关于UnityC#当中常见的语法糖

1自动实现属性 (Auto-implemented Properties)&#xff1a;快速实现对象封装 // 传统属性 private int age; public int Age {get { return age; }set { age value; } }// 自动实现属性 public int Age { get; set; }2对象和集合初始化 (Object and Collection Initializers)…

JVM总结2

1.基本概念 java代码执行 代码编译class&#xff1a;javac 源文件通过编译器产生字节码文件&#xff0c;字节码文件通过jvm的解释器编译成机器上的机器码 装载class&#xff1a;ClassLoader执行class&#xff1a; 解释执行编译执行 client compilerserver compiler 内存管理…

常见的服务器安全管理漏洞

常见的服务器安全管理漏洞 企业信息化技术的应用&#xff0c;以不可逆转。随着文件服务器、ERP管理软件等等在企业中生根发芽&#xff0c;应用服务器也逐渐在企业中普及起来。以前在企业中有一台应用服务器已经是了不起的事情&#xff0c;现在有两台、三台的&#xff0c;也不为…

【LeetCode】169. 多数元素

目录标题 2023-8-9 10:43:27 169. 多数元素 2023-8-9 10:43:27 public int majorityElement(int[] nums) {int minTimes nums.length / 2;Arrays.sort(nums);int pre 0;int last pre;while (last < nums.length) {if (nums[pre] ! nums[last]) {if (last - pre > min…

Docker 方式 部署 vue 项目 (docker + vue + nginx)

1.安装好 nginx 。 2. 把 vue 项目的源码克隆到确定目录下。用 git 管理&#xff0c;所以直接 git clone 到既定目录就行了。 如我的目录是&#xff1a;/root/jiangyu/projects/gentle_vue/gentle_vue_code 。 3. 项目打包&#xff1a; npm run build 复制 会自动生成 dist…

自然语言处理(Natural Language Processing,NLP)

自然语言处理(Natural Language Processing&#xff0c;NLP)是人工智能领域的一个重要分支&#xff0c;旨在使计算机能够理解、处理和生成人类自然语言。NLP 的目标是让计算机能够像人类一样有效地理解和交流&#xff0c;从而实现更自然、更智能的人机交互。 NLP的理解概括&…