dompdf.js终极指南：浏览器端HTML转PDF引擎，零后端、无jsPDF，一行代码生成可选中矢量PDF

【免费下载链接】dompdf.jsHTML to PDF in the browser — one line of code for selectable, searchable vector PDFs (10,000 pages). Pure frontend: zero backend, zero runtime deps. TypeScript over a Rust WebAssembly engine; an html2canvas/jsPDF alternative.项目地址https://gitcode.com/gh_mirrors/do/dompdf.js点击查看免费下载dompdf.js是一个纯前端的浏览器端 HTML 转 PDF 引擎它直接读取浏览器已计算好的 DOM 布局在浏览器内生成可选中、可搜索的矢量 PDF。零后端、无 jsPDF 依赖一行代码即可导出500 页文档典型耗时约 2 秒极限可扩到上万页。它是什么为什么值得用传统的「HTML 转 PDF」方案大多依赖html2canvas jsPDF先把整个页面截图成 Canvas再拼进 PDF。结果就是——文字变成了图片不可选、不可搜索文件还特别大。dompdf.js换了一条路不截图而是读取浏览器已经算好的布局几何信息重新「画」出一份以矢量文本为主的 PDF。这意味着✅ 文本可复制、可搜索、可放大不失真✅ 整份文档不经过服务器隐私零上传✅ 长文档性能强典型测试约 2 秒生成 500 页✅ 自带页眉页脚、水印、中文字体、表单、加密等导出刚需能力一句话定位它是 html2canvas/jsPDF 的替代方案也是目前少有的「纯前端 Rust/WASM」矢量 PDF 引擎。功能清单一张表看懂能力能力说明 分页与纸张A/B/C 系列、Letter、Legal、Tabloid 及自定义尺寸 页眉页脚页码占位符${currentPage}/${totalPages}、逐页不同配置 水印文字/图片水印角度、透明度、上下层叠放、逐页控制 中文与自定义字体TTF 嵌入、字体子集、语言区间回退langFontConfig️ 视觉效果图片、SVG、Canvas、背景、圆角、阴影、渐变、透明度 超链接自动转为 PDF 链接注释 表单导出静态外观 可交互 AcroForm 字段hybrid模式 加密与压缩用户/所有者密码、权限控制、DEFLATE 压缩 进度回调onProgress返回采集、计页、渲染、完成四个阶段完整选项表见 README_CN.md页面尺寸速查表见 page_sizes.md。工作原理5 步生成 PDFdompdf.js的流水线由TypeScript Web Worker Rust/WASM三层协作完成主线程采集——遍历目标元素读取浏览器计算后的布局、样式、文本、图片和表单状态编码快照——TypeScript 把采集结果编码成紧凑的二进制快照转移给 Worker——快照通过可转移对象发送到 Web Worker主线程不被阻塞Rust/WASM 渲染——完成分页、字体子集、绘制和 PDF 对象写入回传结果——主线程拿到 PDF 字节返回Blob/Uint8Array或触发下载。这套结构的关键优势不先把整份文档画成一张 Canvas把最重的 PDF 生成工作移出主线程所以长文档导出不卡顿。前端采集与快照src/snapshot.ts、src/worker.tsRust 渲染层wasm/src/paginate.rs、wasm/src/font.rs、wasm/src/encrypt.rs、wasm/src/deflate.rs快速上手两种安装方式方式一npm 安装推荐npm install dompdf.js运行环境需要支持 Web Workers、WebAssembly 的现代浏览器构建开发需要 Node.js 18。方式二CDN 一行引入script srchttps://cdn.jsdelivr.net/npm/dompdf.jslatest/dist/dompdf.min.js/script引入后 API 挂载在全局dompdf上适合快速验证。一行代码生成 PDF最小示例获取 PDF 的Blob用于预览、上传或自定义下载import dompdf from dompdf.js; const element document.querySelectorHTMLElement(#capture); const blob await dompdf(element, { format: a4, pagination: true, backgroundColor: #ffffff, }); const url URL.createObjectURL(blob); window.open(url, _blank);更省事的一键下载import { downloadPDF } from dompdf.js; await downloadPDF(element, { format: a4, pagination: true, compress: true, }, report.pdf);常用 API 一览API返回值适用场景dompdf(root, options?)Blob默认入口预览/自定义流程exportPDF(root, options?)Blob同上语义更明确renderToBytes(root, options?)Uint8Array上传接口、File System APIdownloadPDF(root, options?, filename?)触发下载一键导出按钮inspect(root, options?)快照摘要诊断节点/图片/字体/页数完整 TypeScript 类型定义见 src/snapshot.ts。实战技巧长尾功能速查 分页与强制换页pagination: true按页面可用高度自动分页想手动控制换页位置给元素加属性即可section pageBreak从新的一页开始/section article divisionDisable尽量保持在本页完整显示/article横向 A4 直接传自定义尺寸format: [842.25, 595.5]。 页眉页脚与页码pageConfig: { excludePages: [1], // 第一页不显示 footer: { content: Page ${currentPage} / ${totalPages}, height: 48, contentPosition: center, }, }还支持pageConfig(pageNum, totalPages)函数形式每页返回不同配置比如奇偶页水印不同。 文字水印watermark: { text: INTERNAL ${currentPage}, color: rgba(185, 28, 28, 0.14), angle: -35, spacing: [180, 130], layer: under, } 中文字体避免空白和方框浏览器字体不会自动嵌入 PDF中文文档必须显式注册 TTFconst fontBuffer await fetch(/fonts/SourceHanSansSC-Regular.ttf) .then((r) r.arrayBuffer()); await dompdf(element, { fontConfig: { fontFamily: SourceHanSansSC-Regular, // 与 CSS font-family 一致 fontBytes: new Uint8Array(fontBuffer), fontWeight: 400, }, });多语言混排可用langFontConfig按 Unicode 区间选择字体并设置默认回退。仓库内置示例字体加载脚本如 examples-main/SourceHanSansCNNormal-normal.js。 加密与文档属性encryption: { userPassword: reader-password, ownerPassword: owner-password, userPermissions: [print, copy], }, metadata: { title: Quarterly Report, author: Alice, keywords: [report, finance], }加密由 Rust 层实现源码见 wasm/src/encrypt.rs。 导出进度反馈onProgress(progress) { if (progress.stage rendering) { console.log(渲染中${progress.currentPage}/${progress.totalPages}); } }四个阶段collecting→countingPages按需→rendering→done非常适合做导出进度条。常见问题FAQ❓ 中文显示为空白或方框通过fontConfig.fontBytes注册含相应字符的 TTF 字体并保证元素 CSSfont-family与fontFamily一致。❓ 分页位置和浏览器预览不一致把导出容器宽度调到接近目标纸张内容宽度A4 ≈ 794px 96DPI需扣除页边距导出前等待字体和图片加载完成。❓ 跨域图片没出现在 PDF 里设置useCORS: true并确认图片服务器返回Access-Control-Allow-Origin——前端选项无法绕过服务器限制。❓ 如何减小 PDF 体积开启compress: true、避免使用远超显示尺寸的大图、适当降低jpegQuality、只注册实际用到的字体和字重。❓ 能跑在 Node.js / SSR 里吗不能直接采集页面依赖 DOMNext.js、Nuxt 等 SSR 项目请在客户端调用导出 API。从 html2canvas jsPDF 迁移过来项目已从旧的html2canvas jsPDF流水线迁移到DOM 快照 Worker WASM。旧参数大多被接受部分会输出 warning以平滑过渡完整对照见迁移说明中文docs/migration-compat.zh-CN.md英文docs/migration-compat.md建议升级路径先升级版本保留旧参数 → 观察 warning 确认哪些只是兼容签名 → 把依赖 jsPDF 实例的定制逻辑迁到导出前后处理 → 状态反馈统一切到onProgress。⚠️ 已知边界动画、视频、iframe 无法完整动态导出复杂滤镜/遮罩可能被降级或栅格化它不是完整浏览器渲染引擎。本地开发与项目结构rustup target add wasm32-unknown-unknown npm install npm run build # 构建发布包 npm test # 构建 WASM 并运行 PDF 冒烟验证 npm run serve # 8080 端口启动示例服务验证脚本 scripts/verify.mjs 会检查基础分页、PDF 结构、图片、中文字体子集等核心链路。dompdf.js/ ├── src/ # TypeScript API、DOM 采集、Worker 和 WASM 桥接 ├── wasm/ # Rust 分页、字体、压缩、加密和 PDF 写入器 ├── examples-main/ # 浏览器演示页面和示例字体 ├── docs/ # 迁移说明与 PDF 差异系统文档 └── scripts/ # 构建、验证和 PDF 差异工具写在最后如果你需要一个不上传数据、文本可选中、长文档不卡死的浏览器端 HTML 转 PDF 方案dompdf.js目前的组合拳——TypeScript API Web Worker Rust/WASM 矢量渲染再加上水印、页眉页脚、中文字体、加密压缩这些导出刚需——相当完整。 欢迎加入维护交流群交流实战问题项目基于 MIT License 开源变更记录见 CHANGELOG.md参与贡献前请阅读 CONTRIBUTING.md。赞分享【免费下载链接】dompdf.jsHTML to PDF in the browser — one line of code for selectable, searchable vector PDFs (10,000 pages). Pure frontend: zero backend, zero runtime deps. TypeScript over a Rust WebAssembly engine; an html2canvas/jsPDF alternative.项目地址https://gitcode.com/gh_mirrors/do/dompdf.js点击查看免费下载相关推荐Kokoro-82M如何在资源受限环境中部署高性能TTS模型Kokoro 82M如何在资源受限环境中部署高性能TTS模型 面对TTS模型部署时常见的资源瓶颈——庞大的模型体积、缓慢的推理速度、复杂的依赖环境开发者往往人工智能语音音频极简SVG转PDF浏览器端矢量图无损转换全攻略极简SVG转PDF浏览器端矢量图无损转换全攻略 在当今前端开发中 SVG转PDF 的需求日益增长无论是将网页图表导出为报告还是将矢量图形保存为可打印文档图形学如何用jsPDF实现浏览器端PDF生成开发者必备的零后端创新指南如何用jsPDF实现浏览器端PDF生成开发者必备的零后端创新指南 在现代Web开发中浏览器端PDF生成已成为提升用户体验的关键功能。jsPDF作为一款强大的后端创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考