前端搞 PDF 导出，最常见的“土办法”就是 html2canvas 转成图片，再把图片塞进 jspdf 里。缺点很明显：生成的 PDF 其实是大图，文件体积大、放大糊、文字没法选中复制。

GitHub 上发现个叫 dompdf.js (作者 lmn1919) 的项目，路子不一样。它魔改了 html2canvas 的渲染器，直接读取 DOM 样式去调用 jspdf 的绘图方法。生成的 PDF 是矢量的，清晰度高且支持文本编辑，哪怕生成数千页的文档也能扛得住。

简单说，该脚本允许您直接在用户浏览器上将网页或部分网页生成为可编辑、非图片式、高清晰度、小体积、可打印的矢量 pdf。

1. 核心功能

• 分页支持：支持自动分页渲染，哪怕是几千页的大文档也能生成。支持配置页眉页脚（含动态变量 ${currentPage} 当前页和 ${totalPages} 总页数）。

• 文本渲染：支持基础文本内容渲染,font-family,font-size,font-style,font-variant,color 等，支持文字描边，不支持文字阴影。

• 图形与多媒体：支持 Web 图片、Base64 图片、SVG 图片以及 Canvas 元素。

• 样式支持：支持背景色、背景图、背景渐变，以及边框渲染（注意：目前仅支持实线）。

• 复杂渲染：利用 foreignObjectRendering 技术支持阴影和渐变（但这部分是作为背景图插入的）。

• 防截断：提供 divisionDisable 属性，给元素加上这个，跨页时它会自动整体移到下一页，不会被切成两半。

2. 技术原理与环境

• 实现机制：基于 html2canvas 和 jspdf，但核心是修改了 html2canvas 的渲染器 (canvas-renderer)，绕过了“生成图片”这一步。

• 开发语言：主要用 TypeScript (58.4%) 写成，配合 HTML (27.5%) 和 JS (13.9%)。

• 依赖：需要环境支持 Promise，如果是旧浏览器（如 IE）得自己引 polyfill。

3. 使用与配置 (代码流)

• 安装：npm install dompdf.js --save 或者走 CDN (jsdelivr)。

• 基本用法：

  JavaScript

  import dompdf from 'dompdf.js';
  // 只需要传入节点和配置
  dompdf(document.querySelector('#capture'), options)
    .then((blob) => {
      // 拿到 blob 后自己做下载处理
    });

• 高级配置 (Options)：

• encryption：支持 PDF 加密，能设用户/所有者密码，还能控制打印/修改权限。

• compression：是否开启压缩。

• format：页面尺寸 (A4, Letter 等)。

• useCORS：允许跨域图片加载。

• quality/precision：控制元素位置精度。

4. 中文与自定义字体 

jspdf 原生不支持中文，这库提供了一套方案，但得折腾一下：

1. 字体转换：必须把 .ttf 字体转成 Base64 格式的 JS 文件。

2. 配置引入：在 fontConfig 里注册 FontFamily、字重和样式。

3. 注意：中文字体文件很大，转成 Base64 后会让 PDF 体积暴涨，建议务必对字体做子集化 (Subsetting) 处理，只保留用到的字。

5. 注意事项

• 样式一致性：毕竟是基于 DOM 解析重绘，复杂的 CSS 属性可能还原得不完美，生成的 PDF 长相可能和网页不完全一样。

• Iframe 限制：明确不支持渲染 iframe 内容，别想套娃。

• CSS 短板：边框只支持实线 (Solid)，虚线点线目前不支持。

• 兼容性：IE 浏览器不支持 foreignObjectRendering，如果要兼容老古董得关掉这个特性。

• 体积问题：虽然矢量化体积小，但如果你引入了未压缩的中文字体，文件大小会原地起飞。

总结

dompdf.js 适合那些需要生成结构化报告、合同，且对清晰度和打印质量有要求的场景。如果你只是想快速截个屏发给运营，那还是 html2canvas 方便；但如果你要生成一份正式的、可搜索内容的 PDF 报告，这个库是个不错的轮子。目前 GitHub 上 762 Stars，MIT 协议。

项目地址：

https://github.com/lmn1919/dompdf.js​