jsPDF 浏览器生成 PDF 快速上手：无需服务器，5 分钟输出第一份文档
【免费下载链接】jsPDF Client-side JavaScript PDF generation for everyone. 
项目地址: https://gitcode.com/gh_mirrors/js/jsPDF
jsPDF 是一款免费开源的 JavaScript 库，在浏览器里就能完成文本排版、图片嵌入与文件保存，全程无需服务端渲染。如果你在找前端 PDF 生成方案，这篇实操指南能让你 5 分钟内跑起来。
什么时候需要它
传统做法是后端接收数据，用 reportlab、iText 这类服务端库渲染 PDF，再回传下载链接。这条链路有三个代价：每次调整版式都要发布服务端代码；导出高峰给服务器叠加渲染压力；用户数据必须先离开设备。
jsPDF 把渲染管线整体搬进浏览器：数据不出用户设备，文件直接保存到本地，你连导出接口都不用设计。用户点一下"导出"按钮立刻拿到文件，这类交互它最擅长；对不便上传服务端的敏感文档，它也是更稳妥的选择。
五分钟上手：最小示例生成第一份 PDF
一条命令完成安装（也可以 git clone https://gitcode.com/gh_mirrors/js/jsPDF 拉取源码自行构建）：
npm install jspdf –save
然后 4 行代码即可：
import { jsPDF } from "jspdf";
const doc = new jsPDF(); // 默认 A4 纵向，单位 mm
doc.text("Hello world!", 10, 10);
doc.save("a4.pdf");
执行 save 后浏览器弹出保存对话框，你得到一份能被任意 PDF 阅读器打开的 a4.pdf。纸张、方向、单位都在构造器里配置：传入 { orientation: "landscape", unit: "in", format: [4, 2] } 就能输出自定义的 2×4 英寸横向文档。
进阶一点，把图片放进同一份文档（addImage 支持 PNG、JPEG、WEBP 等格式，最后一个参数控制 JPEG 压缩等级）：
doc.addImage(imgDataUrl, "JPEG", 10, 20, 60, 40, undefined, "MEDIUM");
doc.save("with-image.pdf");
能力详解：文本、图片与字体
文本排版：定位、换行与分页
doc.text(str, x, y) 把文字放在坐标系指定位置，字体、字号、颜色分别由 setFont、setFontSize、setFillColor 控制，坐标单位就是构造器里声明的那套。长文本需要自动换行时，用 splitTextToSize(text, maxWidth) 按最大宽度拆成行数组，再逐行调用 text 输出；当 y 坐标超过页底就调用 addPage() 另起一页，这就是自动分页的标准写法。14 种 PDF 标准字体内置开箱即用，适合英文与数字为主的报表、表格类文档。
图片嵌入：格式、透明与压缩
addImage 接受 base64 DataURL、<img> 元素、<canvas> 元素和 RGBA 像素数组作为输入，PNG 的透明通道会原样保留，8 位与 16 位色深都能处理。调用时传数据、格式、坐标和宽高，图片即落在页面上；同一个图第二次插入时传别名，文件内只存一份数据，不会重复膨胀。压缩参数取 NONE、FAST、MEDIUM、SLOW 四档，在文件体积与画质之间取舍。周报插图、证书模板配照片、批量导出图片集，都走这条路径。
自定义字体：解决中文乱码问题
标准字体只覆盖 ASCII，要输出中文、阿拉伯文等文字，必须加载包含相应字形（glyph）的 .ttf 字体。流程是：用 fetch 把字体读成二进制字符串，addFileToVFS 注册进虚拟文件系统，addFont 声明字体名与字重，之后 setFont 切换即可。仓库自带 fontconverter 页面，可以把 .ttf 直接转成 base64 字体文件。选字体前确认它支持目标文字，否则页面会出现乱码。
三个真实落地场景：输入什么、得到什么
发票导出：输入订单对象（客户名、明细行、合计金额），按固定模板排版后输出可直接打印的发票 PDF，不再受用户本地 Word 版本影响。
证书批量生成：输入学员姓名与成绩，前端循环套用同一模板填充字段，一次生成一批证书文件，服务端只负责提供数据。
截图转 PDF 报告：输入 canvas 抓取的页面截图，addImage 嵌入正文，再用 text 补上标题与日期，得到一份可直接发群的图文报告。
模块化按需引入：只用你需要的功能
jsPDF 把功能拆成 src/modules/ 下的独立插件，构建时按需拼装，最终产物不会包含你没用到的代码。日常最常用的是这三个：
- acroform 模块：在 PDF 里绘制文本框、复选框、下拉框等可填写的表单域。
- addimage 模块：负责图像解析与嵌入，一切图片场景的前提。
- html 模块：把网页内容转成 PDF，依赖可选的 html2canvas，适合"把当前页面存成 PDF"这类需求。
避坑与优化：体积、兼容与安全
控制体积：PDF 体积约等于各张嵌入图片体积之和。几 MB 的 JPEG 先用 MEDIUM 或 SLOW 压缩再嵌入，或先在 canvas 上缩小再写进文档。
批量生成：循环里不要反复创建销毁 doc，跨页内容复用同一个文档对象即可；需要把 PDF 交给自己的文件管理逻辑时，用 doc.output("arraybuffer") 取二进制数据。
兼容性：现代浏览器开箱即用；要兼容 IE 等旧内核需引入 jspdf/dist/polyfills.es.js；在 Node 里运行会自动切到 node 构建，且默认限制读取本地文件，需要显式授权。
安全：任何要写进 PDF 的字符串都先做清洗，用户输入是注入类风险的主要入口。
延伸阅读：文档、示例与测试用例
- docs/：按方法拆页的 API 参考，查参数名、返回值和调用示例最方便。
- examples/：各功能的可运行 HTML 示例，配合同目录下的脚本，改几行就能试出自己的效果。
- test/specs/：覆盖各模块的单元测试，看某个方法的正确调用姿势时，读 spec 比读源码快。
回到要点：一条命令安装、4 行代码出文档、30 多个模块按需扩展，前端到 PDF 的全流程你都已经能独立完成。建议的下一步是打开仓库里的 fontconverter 页面，把你常用的一个中文字体转成 base64 文件，接进上面的最小示例，输出第一份中文 PDF。
【免费下载链接】jsPDF Client-side JavaScript PDF generation for everyone. 项目地址: https://gitcode.com/gh_mirrors/js/jsPDF
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
