【免费下载链接】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 工具在浏览器里一行代码即可生成可搜索、可选择文字的矢量 PDF支持页眉、页脚、页码与精准分页无需后端。下面这篇教程带你从零玩转它的核心配置项pageConfig并掌握分页控制技巧。 先看一张由它生成的 19 页研究报告实拍效果封面、目录、正文页各自独立排版页脚自动带页码/总页数——这正是本篇要讲的能力。一、dompdf.js 是什么为什么值得用传统方案html2canvas jsPDF是把页面截图成图片再塞进 PDF结果是文字不可选中、文件巨大、放大就糊。dompdf.js 走的是另一条路它读取浏览器已经计算好的布局几何信息再通过 Rust WebAssembly 引擎在浏览器端直接生成矢量 PDF。带来的直接好处零后端文档不上传服务器隐私敏感场景合同、病历、财务也能放心用文字可搜索可选中真正的矢量 PDF而非整页截图⚡超长文档友好基准测试中 500 页约 2 秒单份导出可扩展到上万页内置页眉页脚、页码占位符、逐页配置这就是pageConfig的主场核心 API 就一个默认导出dompdf(root, options) - PromiseBlob常用辅助函数还有exportPDF、renderToBytes、downloadPDF见 src/index.ts。二、快速上手3 步生成第一份带分页的 PDF先安装要求现代浏览器支持 Web Workers 与 WebAssemblynpm install dompdf.js然后是导出三件套——找到目标元素、打开分页、拿到 Blobimport dompdf from dompdf.js; const element document.querySelectorHTMLElement(#capture); const blob await dompdf(element, { format: a4, pagination: true, // 开启分页这是页眉页脚的前提 backgroundColor: #ffffff, });三个关键点pagination: true是分页与页眉页脚生效的前提。false时是内容多高就生成多高的连续单页适合小票这类场景容器宽度要贴近纸张内容宽度A4 在 96 DPI 下约794px × 1123px如果设了页边距容器宽度要再减去边距否则分页位置会漂移完整选项与默认值对照见 README.md 的 Export Options 一节三、纸张尺寸与页边距分页的地基分页的可用区域 纸张高度 − 页边距 − 页眉高度 − 页脚高度。所以先把这两块定下来。常用纸张尺寸速查数据来自 page_sizes.md名称宽 (pt)高 (pt)宽 (px96DPI)高 (px96DPI)a4595.5842.257941123a3842.251190.2511231587letter6127928161056legal61210088161344支持a0~a10、b0~b10、c0~c10、letter、legal、tabloid等预设完整清单见 src/pageSizes.ts。两个实用技巧横向 A4直接交换宽高传[842.25, 595.5]orientation选项仅为兼容保留不会自动换向四边不同边距marginPt接受[上, 右, 下, 左]数组单位是 pt1pt 1/72 英寸await dompdf(element, { format: a4, pagination: true, marginPt: [36, 36, 36, 36], // 四边各 36pt });四、pageConfig 静态配置页眉页脚全字段实战pageConfig是选项对象里的页眉页脚配置项类型定义为PageConfigOptions见 src/snapshot.tsawait dompdf(element, { pagination: true, pageConfig: { excludePages: [1], // 第 1 页不渲染页眉页脚封面留白 header: { content: 季度运营报告, height: 48, // 页眉区域高度px contentColor: #334155, contentFontSize: 11, contentPosition: centerLeft, // 语义化位置 padding: [0, 24, 0, 24], // 顺序[上, 右, 下, 左] }, footer: { content: Page ${currentPage} / ${totalPages}, height: 48, contentColor: #64748b, contentFontSize: 10, contentPosition: center, }, }, });页码占位符content字符串里内置两个占位符${currentPage}当前页码从 1 开始${totalPages}总页数引擎会先统计总页数再逐页渲染见 src/index.ts 的两阶段流程位置语义预设 or 自定义坐标contentPosition支持 9 种语义位置center、centerLeft、centerRight、centerTop、centerBottom、leftTop、leftBottom、rightTop、rightBottom也支持[x, y]坐标数组原点为页眉/页脚区域内框左上角。 小提醒启用分页但不传pageConfig时引擎默认保留 50px 空页眉、并在 50px 页脚中渲染当前页/总页数。需要完全自定义时请显式传入。五、slots 多文本位一个页眉放下标题 页码真实业务里页眉往往不止一块文字左边放文档标题右边放页码。这时用slots——同一区域可放多个文本块各自独立控制字体、颜色、位置类型定义 src/snapshot.tspageConfig: { header: { height: 48, padding: [8, 24, 0, 24], slots: [ { content: 季度业务回顾, position: leftTop, color: #334155, fontSize: 11, fontFamily: Source Han Sans SC, fontWeight: 700, }, { content: Page ${currentPage} / ${totalPages}, position: { x: 100%, y: 0, anchor: rightTop }, color: #64748b, fontSize: 10, }, ], }, },坐标对象{ x, y, anchor }的记法很直观x: 100%指内框右边缘x: 100%-24表示从右边缘往左挪 24pxy: 100%-10表示距内框底边 10pxanchor决定文本盒以哪个点对齐坐标默认leftTop⚠️ 注意slots优先于旧式的content/contentPosition两者都写时以slots为准。六、逐页函数配置封面裸奔、奇偶页不同的魔法静态对象对所有页统一生效如果想第 1 页不要页眉页脚每章标题不同就改用函数形式——引擎统计完总页数后会为每一页调用一次pageConfig(pageNum, totalPages)返回null即该页禁用页眉页脚await dompdf(element, { pagination: true, pageConfig(pageNum, totalPages) { if (pageNum 1) return null; // 封面干净利落地没有页眉页脚 return { header: { content: 内部资料, height: 40, contentPosition: rightTop, }, footer: { content: ${pageNum} / ${totalPages}, height: 40, contentPosition: center, }, }; }, });项目自带演示里就有这种用法第一页返回null可直接参考 examples-main/demo1.html。判断是否需要逐页解析的辅助函数也已导出pageConfigNeedsPerPageResolutionsrc/index.ts自定义渲染流水线时用得上。七、精准分页控制pageBreak 与 divisionDisable分页器自动切页之外你还可以用两个 HTML 属性直接指挥它强制换页pageBreaksection第一章的内容/section section pageBreak第二章从这里新起一页/section报告、论文里每章从新页开始就是它干的活。防止被拆散divisionDisablearticle divisionDisable 这块内容会尽量保持在同一页内。 /article表格行、卡片这类拆开就难看的元素加它就能避免被跨页劈成两半。注意如果元素本身高于一整页可用高度分页器仍会拆分它否则内容就无处放置了。 调试技巧computePageBreaks(root, options)可以提前算出每个分页点的 Y 坐标相对根元素顶部方便你在页面上画出分页线肉眼核对分页是否符合预期。八、常见问题速查现象原因解决页眉页脚没出现忘了开分页加pagination: true分页位置和内容错位容器宽度 ≠ 纸张内容宽度容器宽度设为 794px 减去左右边距封面也出现了页码静态配置对所有页生效用excludePages: [1]或函数形式返回null某块内容被拦腰截断分页点恰好落在它中间给该元素加divisionDisable属性中文显示为符号未嵌入中文字体通过fontConfig注册 TTF项目examples-main/下有思源黑体示例总结一句话回顾本篇pagination: true开启分页 → 用format/marginPt定好纸张和边距 →pageConfig配页眉页脚静态对象、slots多文本位、逐页函数三种形态→pageBreak/divisionDisable微调分页细节。配合水印、加密、表单等其它能力dompdf.js 足以支撑合同打印、报告导出、票据生成等绝大多数前端 PDF 场景。更多细节请阅读仓库内的中文文档完整选项与示例README_CN.md页面尺寸参考表page_sizes.md从 html2canvas/jsPDF 迁移指南docs/migration-compat.zh-CN.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点击查看免费下载相关推荐jsPDF多页文档创建教程分页、页眉页脚与页码设置jsPDF多页文档创建教程分页、页眉页脚与页码设置 在日常工作中你是否遇到过需要将网页内容转换为PDF文档的情况尤其是当内容较多需要分页时手动处理格式、后端告别丑文档CKEditor5 PDF导出页眉页脚定制与页码生成全攻略告别丑文档CKEditor5 PDF导出页眉页脚定制与页码生成全攻略 CKEditor5是一款具有模块化架构、现代集成和协作编辑等功能的强大富文本编辑器框架。前端富文本UI组件从源码到应用ExecJS内部工作原理与架构设计详解从源码到应用ExecJS内部工作原理与架构设计详解 ExecJS是一个强大的Ruby库它提供了在Ruby环境中执行JavaScript代码的能力支持多种J创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考