利用jsPDF实现图片转PDF及合并打印方案
本文介绍如何使用jsPDF将JPG、PNG等图片转换为PDF,并解决Tiff格式需借助tiff.js转换的问题。通过pdf-lib实现不同来源PDF的合并,利用async/await控制异步顺序,最后通过iframe调用print()实现打印预览与导出。
环境准备与依赖引入
安装依赖并引入
import jsPDF from 'jspdf';
import { PDFDocument, } from 'pdf-lib';关键注意事项与格式处理
注意一、
使用jsPDF生成的图片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支持转换的图片格式包括jpg、jpeg、png和bmp,但不支持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时,需注意图片大小的自适应问题。可以通过设置图片的最大宽度来控制图片在PDF中的自适应大小。
const imageWidth = 100;注意五、
由于异步任务的执行可能导致批量选择文件的顺序与实际获得的文件顺序不一致,因此获取到的this.pdfFileArr需要通过id调整为正确的PDF文件打印顺序。
核心代码实现:图片转PDF与合并
图片转pdf代码:
async imgToPdf(arr) {
const promises = [];
arr.forEach(async (x)=>{
const promise = new Promise(async (resolve,reject)=>{
//jsPdf 仅支持JPG/JPEG/PNG/BMP格式,不支持tif
let id = x.ID
let 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 = imgUrl
let 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;
}
};
// 添加图片到 PDF
pdf.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 = false
alert('错误信息为:'+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 = url
console.log("pdf合并完成")
console.log("新合并的pdf--", url)
console.log("新合并的pdf--", mergedPdf)
},PDF预览与打印功能实现
将获得的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的文章就介绍到这了,更多相关jsPDF图片转pdf内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站!
JS转整数出现NaN怎么办?常见异常处理方案
2026-11-05 16:27:31
推荐几款免安装的在线JS压缩工具
2026-11-05 14:54:53
JS怎么使用JSON.stringify实现JSON格式化与缩进
2026-11-04 10:47:30
CodePen、JSFiddle 与 StackBlitz:主流 JS 在线编辑器对比
2026-11-03 21:07:49
JS字符串转数字后怎么正确判断是否为有效数值
2026-11-03 20:04:15
