javascript如何生成与操作PDF文档【教程】

想在浏览器里直接生成一份PDF文件？这事儿听起来简单，做起来却有不少门道。首先得明确一个基本事实：Ja vaScript本身并没有原生的PDF生成能力，所有操作都得依赖第三方库。而且，由于浏览器的安全限制，你无法直接操作用户的文件系统。所以，我们常说的“生成PDF”，本质上是在内存中生成一个PDF二进制数据（Blob），然后触发浏览器的下载，或者将其嵌入页面进行预览。

用 jsPDF 生成基础 PDF 文档

当你需要快速生成一份包含文字和简单图形的PDF时，jsPDF通常是首选。它足够轻量，兼容性也好。不过，有一点必须提前了解：jsPDF本身并不解析HTML。虽然它提供了html()方法，但想用它来转换网页内容，必须配合html2canvas库先把DOM转成图片。这个过程不仅性能开销大，对CSS样式的支持也相当有限，复杂布局很容易走样。

那么，怎么开始呢？首先引入库。你可以通过npm安装：npm install jspdf，或者直接在HTML中通过CDN加载：https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js。

创建一个A4纸大小的纵向文档很简单：

const doc = new jspdf.jsPDF({ orientation: 'portrait', unit: 'mm', format: 'a4' });

添加文本时需要注意，默认的坐标单位是毫米，原点在页面的左上角。比如，在距离左边20mm、顶部30mm的位置写上“Hello World”：

doc.text('Hello World', 20, 30);

文档内容编辑完成后，调用doc.sa ve('document.pdf')会直接触发浏览器下载。如果不想立即下载，而是需要获取Blob对象进行后续处理，可以使用：

const blob = doc.output('blob');

用 pdf-lib 修改已有 PDF 或插入动态内容

如果你的需求不是从零创建，而是修改现有的PDF文档，比如填写表格、添加签名、合并文件或者加水印，那么pdf-lib会更适合。这个库的定位是操作PDF的内部结构，而不是渲染页面。它不能凭空画图，但可以加载一个已有的PDF，然后对其中的表单字段、图像和页面进行增删改查。

加载一个已有的PDF文件：

const pdfDoc = await PDFDocument.load(existingPdfBytes);

如果PDF本身包含了AcroForm表单，你可以轻松地填充字段：

const form = pdfDoc.getForm();
const field = form.getTextField('name');
field.setText('Alice');

想在PDF里插入一张图片？需要先将PNG或JPEG图像嵌入到文档中，然后再绘制到指定页面：

const image = await pdfDoc.embedPng(pngBytes);
page.drawImage(image, { x: 50, y: 50, width: 100 });

所有修改完成后，调用await pdfDoc.sa ve()会返回一个包含新PDF数据的Uint8Array。

浏览器中预览 PDF 而不下载

生成了PDF数据，如何让用户直接在页面上预览，而不是每次都下载呢？核心方法是利用URL.createObjectURL()创建一个指向Blob的临时URL，然后将这个URL赋值给