dompdf.js：前端 PDF 导出的矢量级解决方案
|
admin
2026年9月2日 10:38
本文热度 46
|
dompdf.js（GitHub: lmn1919/dompdf.js，官网 Demo: dompdfjs.lisky.com.cn）。它解决的是一个很经典的前端痛点：如何在不靠后端、不把页面截成图的前提下，把 HTML 导出成可搜索、可复制、体积小的真实 PDF。
dompdf.js 是一个纯前端 DOM-to-PDF 引擎，技术栈是 TypeScript + Web Workers + Rust/WASM。
它不走html2canvas 截图 → jsPDF 塞图片 这条老路，而是：
主线程读浏览器已经算好的布局（getBoundingClientRect、computed style、文本节点、字体、图片、表单状态）；编码成二进制 DOM Snapshot 丢给 Web Worker；Rust/WASM 做分页、字体子集化、矢量绘制、DEFLATE 压缩、加密，直接写 PDF 字节流。关键点：PDF 里的文字还是文字（Text 对象），不是整页位图。所以放大不糊、可选中、可 Ctrl+F、可复制，文件体积也远小于截图方案。
和 html2pdf.js 的本质区别
| | |
|---|
| | |
| | |
| | |
| | |
| | |
| | 需主动嵌 TTF（fontConfig/fontBytes） |
| | pagination:true + pageBreak / divisionDisable 整体迁移 |
核心能力（已稳定可用）
分页与版式：A0~A10/Letter/Legal 等，自定义 [w,h] pt；marginPt、pageBreak（强制前翻页）、divisionDisable（卡片/签字区/报价摘要跨页不切开）。文字与字体：Unicode、中日韩靠 fontConfig.fontBytes 嵌 TTF，langFontConfig 按 Unicode 区间回退；中文不嵌字体就会变方框。图形：内联 SVG 保持矢量；位图（Canvas/JPEG/PNG/dataURL）走 jpegQuality 压缩；复杂 CSS 滤镜/混合模式可能降级为位图。页眉页脚：静态或 (pageNum, totalPages) => config 按页回调，${currentPage}/${totalPages} 占位符。水印：文字/图片、角度、平铺间距、under/over 层级、按页函数。表单：form: 'static' | 'interactive' | 'hybrid'，input/textarea/select/checkbox/radio 可导出成 AcroForm 字段。安全与体积：compress:true（DEFLATE）、encryption（用户/所有者密码 + print/copy/modify 权限）。进度：onProgress 回 collecting / countingPages / rendering / done。API 形态：默认导出 dompdf(el, opts) 返回 Promise<Blob>；另有 exportPDF / renderToBytes / downloadPDF / inspect，以及 collectSnapshot / computePageBreaks 等底层接口。在线 Demo（dompdfjs.lisky.com.cn）在展示什么
不是炫技渐变拼盘，而是一个「业务文档压力样本」：
动态多行明细表（验证列宽、换行、复制顺序、多页表格）内联 SVG 流程图 + 一张 Canvas JPEG（仅验证图片链路）欧拉恒等式 / 高斯积分 / 贝叶斯 / 分段函数（预格式文本与符号）带 divisionDisable 的卡片（签字区语义，验证不被拦腰截断）打开后点导出，拿它和 html2pdf.js 同内容导出对比，体积和「能否选中文字」差距最直接。
接入成本
npm install dompdf.js
或 CDN：
<script src="https://cdn.jsdelivr.net/npm/dompdf.js@latest/dist/dompdf.min.js"></script>
最小可用：
import dompdf from 'dompdf.js';
const blob = await dompdf(document.querySelector('#capture'), {
format: 'a4',
pagination: true,
compress: true,
fontConfig: { fontFamily: 'SourceHanSansSC', fontBytes: await loadTTF('/fonts/xxx.ttf') }
});
SSR 框架（Next/Nuxt）只能在客户端事件里调，不能在服务端跑——它要 DOM/CSSOM/WASM。
边界（别当万能浏览器用）
不重排布局：CSS 是浏览器算完它再读，它自己不是渲染引擎；视频、iframe、animation、复杂 filter/mask/blend 会降级或栅格化；完整 CJK 字体很大，生产环境建议子集化或只注册用到的字重；跨域图片必须对方返回 Access-Control-Allow-Origin，useCORS:true 不能单端绕过；orientation 选项是兼容残留，横版请直接传 format:[842.25,595.5]。一句话定位
dompdf.js = 前端版「轻量 PDF 渲染器」，用 WASM 取代截图管线，适合报表、合同、审计清单、长文归档这类「要矢量文字、要分页稳、要体积小」的场景；不适合拿来做「整站所见即所得截图留存」。
阅读原文：点击这里
该文章在 2026/9/2 10:38:40 编辑过
400 186 1886
