批量打印-----jsPDF将图片转为pdf,并合并pdf
安装依赖并引入
import jsPDF from 'jspdf';
import { PDFDocument, } from 'pdf-lib';
注意一、
使用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();
相关文章:
批量打印-----jsPDF将图片转为pdf,并合并pdf
安装依赖并引入 import jsPDF from jspdf; import { PDFDocument, } from pdf-lib;注意一、 使用jspdf将图片(jpg/jpeg/png/bmp)转pdf(记为pdfA),得到的pdf(pdfA)和需要合并的pdf(记为pdfB)类…...
【Git】版本控制器详解之git的概念和基本使用
版本控制器git 初始Gitgit的安装git的基本使用初始化本地仓库配置本地仓库三区协作添加---add修改文件--status|diff版本回退--reset撤销修改删除文件 初始Git 为了能够更⽅便我们管理不同版本的⽂件,便有了版本控制器。所谓的版本控制器,就是⼀个可以记…...
C语言 棱形图案
目录 一、问题分析 上部分: 下部分: 二、代码演示 一、问题分析 如上图所示,我们可以将棱形进行拆解,分为上下两个部分。 上部分: 通过观察,我们得到 单边空格数 上半部分总行数 - 行数 - 1 …...
在idea使用GitHub账号、Copilot异常
登录GitHub显示这样的信息: Invalid authentication data.Connection refused: connect Failed to initiate the GitHub login process. Please try again. 修改hosts(C:\Windows\System32\drivers\etc\hosts),添加以下参数即可…...
面试热题(反转字符串中的单词)
给你一个字符串 s ,请你反转字符串中 单词 的顺序。 单词 是由非空格字符组成的字符串。s 中使用至少一个空格将字符串中的 单词 分隔开。 返回 单词 顺序颠倒且 单词 之间用单个空格连接的结果字符串。 注意:输入字符串 s中可能会存在前导空格、尾随空格…...
Stable Diffusion WebUI 从零基础到入门
本文主要介绍Stable Diffusion WebUI的实际操作方法,涵盖prompt推导、lora模型、vae模型和controlNet应用等内容,并给出了可操作的文生图、图生图实战示例。适合对Stable Diffusion感兴趣,但又对Stable Diffusion WebUI使用感到困惑的同学&am…...
【uniapp】一文读懂app端安装包升级
一、前言 首先,在app端开发上线的过程中,会面临一个问题,就是关于app端的版本升级的问题。如果不做相关处理来引导用户的话,那么app就会出现版本没有更新出现的各种问题,我们常见的有在线升级和去指定地址下载安装两种…...
【算法题】2518. 好分区的数目
题目: 给你一个正整数数组 nums 和一个整数 k 。 分区 的定义是:将数组划分成两个有序的 组 ,并满足每个元素 恰好 存在于 某一个 组中。如果分区中每个组的元素和都大于等于 k ,则认为分区是一个好分区。 返回 不同 的好分区的…...
编写守护进程
守护进程是一个后台进程,当操作系统启动时就可以运行的进程,当操作系统结束时结束的进程,与终端无关。 结果 不想要了就杀死...
stable-diffusion-webui启动No Python at ‘C:\xxx\xxx\python.exe‘
打开webui.bat 把 if not defined VENV_DIR (set "VENV_DIR%~dp0%venv") 中的%~dp0venv改成自己python的安装路径就行获取直接set值即可 如 set VENV_DIRD:\Users\xxx\AppData\Local\Programs\Python\Python310 另外就是直接运行webui-user.bat也可以 如果运行…...
面试热题(合并两个有序列表)
将两个升序链表合并为一个新的 升序 链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。 合并链表这类型题也是比较经典的题了,因为链表是由指针相互指向而确定位置,所以我们只需要改变某些节点的指针便可以做到对链表进行排序 今天这个方法…...
QT生成Word PDF文档
需求:将软件处理的结果保存为一个报告文档,文档中包含表格、图片、文字,格式为word的.doc和.pdf。生成word是为了便于用户编辑。 开发环境:qt4.8.4vs2010 在qt的官网上对于pdf的操作介绍如下:http://qt-project.org/…...
阿里云服务器搭建WordPress建站教程基于Windows系统
本教程是使用阿里云服务器镜像系统选择的是Windows操作系统,手动安装WordPress博客网站全过程。本教程介绍如何在Windows操作系统的ECS实例上搭建WordPress网站。 目录 准备工作 搭建WordPress网站 解析WordPress网站域名 准备工作 创建Windows操作系统的ECS实…...
动态链接(8/11)
静态链接的缺点:生成的可执行文件体积较大,当多个程序引用相同的公共代码时,这些公共代码会多次加载到内存,浪费内存资源。 为了解决这个问题,动态链接对静态链接做了一些优化:对一些公用的代码࿰…...
Python 之 Http 获取网页的 html 数据,并去掉 html 格式等相关信息
Python之 Http 获取网页的 html 数据,并去掉 html 格式等相关信息 目录 Python之 Http 获取网页的 html 数据,并去掉 html 格式等相关信息...
干不完根本干不完,我也不想加班,快来围观时间管理大师
时间不够用,怎么办? 成功不靠加班。生产队的驴都不加班,你加什么班?到点就下班,该玩玩,该学习认真学,累了就睡觉。 你可以做任何事,但不必做所有事。 时间管理,不是管…...
常见设计模式
概念 设计模式是怎么解决问题的一种方案 常见的设计模式 单例模式 概念:保证一个类仅有一个实例,并提供一个访问它的全局访问点。 应用:项目封装个websocket用于大屏,redux,vuex都应用了单例模式的思想;…...
Android之版本号、版本别名、API等级对应关系(全)(一百六十二)
简介: CSDN博客专家,专注Android/Linux系统,分享多mic语音方案、音视频、编解码等技术,与大家一起成长! 优质专栏:Audio工程师进阶系列【原创干货持续更新中……】🚀 人生格言: 人生…...
Redis的简介,安装(Linux、Windows),配置文件的修改---详细介绍
Redis基础 文章目录 Redis基础1、Redis入门1.1、Redis简介1.2、Redis下载与安装1.2.1、在Linux系统安装Redis1.2.2、在Windows系统安装Redis 1.3、Redis服务启动与停止1.3.1、在Linux中启动服务1.3.2、在Windows中启动服务1.3.3、设置密码校验1.3.4、redis的远程连接 Redis是一…...
Vscode-工具使用
Vscode ,这玩意儿是开源的,以前用收费的破解版,过段时间就高版本不匹配,这次搞个不要钱的玩玩,记录使用心得 下载 下载地址:官网 点击下载,但是这里有个问题下载比较慢,解决办法&a…...
[特殊字符] 智能合约中的数据是如何在区块链中保持一致的?
🧠 智能合约中的数据是如何在区块链中保持一致的? 为什么所有区块链节点都能得出相同结果?合约调用这么复杂,状态真能保持一致吗?本篇带你从底层视角理解“状态一致性”的真相。 一、智能合约的数据存储在哪里…...
变量 varablie 声明- Rust 变量 let mut 声明与 C/C++ 变量声明对比分析
一、变量声明设计:let 与 mut 的哲学解析 Rust 采用 let 声明变量并通过 mut 显式标记可变性,这种设计体现了语言的核心哲学。以下是深度解析: 1.1 设计理念剖析 安全优先原则:默认不可变强制开发者明确声明意图 let x 5; …...
从WWDC看苹果产品发展的规律
WWDC 是苹果公司一年一度面向全球开发者的盛会,其主题演讲展现了苹果在产品设计、技术路线、用户体验和生态系统构建上的核心理念与演进脉络。我们借助 ChatGPT Deep Research 工具,对过去十年 WWDC 主题演讲内容进行了系统化分析,形成了这份…...
大型活动交通拥堵治理的视觉算法应用
大型活动下智慧交通的视觉分析应用 一、背景与挑战 大型活动(如演唱会、马拉松赛事、高考中考等)期间,城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例,暖城商圈曾因观众集中离场导致周边…...
Docker 运行 Kafka 带 SASL 认证教程
Docker 运行 Kafka 带 SASL 认证教程 Docker 运行 Kafka 带 SASL 认证教程一、说明二、环境准备三、编写 Docker Compose 和 jaas文件docker-compose.yml代码说明:server_jaas.conf 四、启动服务五、验证服务六、连接kafka服务七、总结 Docker 运行 Kafka 带 SASL 认…...
Java多线程实现之Callable接口深度解析
Java多线程实现之Callable接口深度解析 一、Callable接口概述1.1 接口定义1.2 与Runnable接口的对比1.3 Future接口与FutureTask类 二、Callable接口的基本使用方法2.1 传统方式实现Callable接口2.2 使用Lambda表达式简化Callable实现2.3 使用FutureTask类执行Callable任务 三、…...
如何将联系人从 iPhone 转移到 Android
从 iPhone 换到 Android 手机时,你可能需要保留重要的数据,例如通讯录。好在,将通讯录从 iPhone 转移到 Android 手机非常简单,你可以从本文中学习 6 种可靠的方法,确保随时保持连接,不错过任何信息。 第 1…...
安宝特方案丨船舶智造的“AR+AI+作业标准化管理解决方案”(装配)
船舶制造装配管理现状:装配工作依赖人工经验,装配工人凭借长期实践积累的操作技巧完成零部件组装。企业通常制定了装配作业指导书,但在实际执行中,工人对指导书的理解和遵循程度参差不齐。 船舶装配过程中的挑战与需求 挑战 (1…...
算法岗面试经验分享-大模型篇
文章目录 A 基础语言模型A.1 TransformerA.2 Bert B 大语言模型结构B.1 GPTB.2 LLamaB.3 ChatGLMB.4 Qwen C 大语言模型微调C.1 Fine-tuningC.2 Adapter-tuningC.3 Prefix-tuningC.4 P-tuningC.5 LoRA A 基础语言模型 A.1 Transformer (1)资源 论文&a…...
算法:模拟
1.替换所有的问号 1576. 替换所有的问号 - 力扣(LeetCode) 遍历字符串:通过外层循环逐一检查每个字符。遇到 ? 时处理: 内层循环遍历小写字母(a 到 z)。对每个字母检查是否满足: 与…...
