JavaScript前端无法直接生成PDF,但可用jsPDF(适合绘图/票据)、pdfmake(适合数据驱动排版)、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 的封装,一行代码触发:
立即学习“Java免费学习笔记(深入)”;
-
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 环境)。










