JavaScript生成PDF方法及常用库推荐

JavaScript虽无法在浏览器中直接生成PDF（受限于无文件系统权限），但可通过jsPDF、pdfmake、html2pdf.js或服务端Puppeteer等成熟方案实现动态创建、排版与下载——jsPDF适合绘图与票据类轻量生成，pdfmake以声明式JSON驱动复杂数据报表，html2pdf.js让HTML区块“一键转PDF”，而Puppeteer则提供近乎完美的高保真打印；选型关键在于匹配场景，同时务必关注中文字体支持、内存限制及加密/签名等需后端协同的高级功能。

JavaScript 本身不能直接生成 PDF 文件（浏览器环境无文件系统权限），但可以通过前端 PDF 库在浏览器中动态创建、填充并下载 PDF，无需后端参与。关键在于选对轻量、维护活跃、API 清晰的库。

jsPDF：最成熟的基础 PDF 生成器

jsPDF 是最老牌、文档最全的纯前端 PDF 库，支持文本、图形、图片、简单表格和字体嵌入（需额外加载 ttf 解析器）。适合生成结构清晰、样式可控的报表、票据、证书等。

• 基础用法极简：const doc = new jsPDF(); doc.text("Hello", 10, 10); doc.save("demo.pdf");
• 支持添加图片（base64 或 canvas）、设置页边距、分页、自定义字体（如引入 Noto Sans CJK 解决中文乱码）
• 不原生支持 HTML 转 PDF，需配合 html2canvas 截图再转为图片插入（有失真和交互丢失问题）

pdfmake：专注“数据驱动”的声明式 PDF

pdfmake 更适合从 JSON 数据快速生成带样式的 PDF，比如订单详情、用户报告。它用“文档定义对象”（DDO）描述布局，逻辑清晰、可维护性强，中文支持开箱即用（内置 UTF-8 字体）。

• 写法类似：const docDefinition = { content: [{ text: "你好，世界", fontSize: 16 }] }; 然后 pdfMake.createPdf(docDefinition).download("report.pdf")
• 内置表格、列表、页眉页脚、多栏、自动分页，支持样式继承和主题配置
• 体积比 jsPDF 略大，但对复杂排版更友好；不擅长绘图或像素级控制

将 HTML 直接转 PDF：使用 Puppeteer（需服务端）或 client-side 替代方案

如果目标是“把某个 HTML 元素（如 div）精准转成 PDF”，纯前端推荐 html2pdf.js —— 它是 html2canvas + jsPDF 的封装，一行代码触发：

• html2pdf().from(element).save(); 自动截图、分页、导出
• 适合打印页面局部内容（如发票预览区），但复杂 CSS（flex/grid/transform）可能渲染异常
• 若需 100% 保真（含分页符、打印样式、页眉页脚），建议用 Puppeteer（Node.js 后端调用 Chrome）生成，再传给前端下载

选型小结：按场景决定

做简单票据或需要绘图 → 选 jsPDF；大量结构化数据+排版要求高 → 选 pdfmake；想“所见即所得”导出当前页面区块 → 用 html2pdf.js；追求完美打印效果且能部署后端 → 上 Puppeteer。

不复杂但容易忽略：中文务必确认字体加载（jsPDF）或使用内置中文字体（pdfmake 已内置）；生成大文件时注意浏览器内存限制；所有前端方案均无法加密、加签或操作已有 PDF——这类需求需后端 PDF 库（如 pdf-lib 配合服务端 Node 环境）。

本篇关于《JavaScript生成PDF方法及常用库推荐》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！