使用html2canvas+jspdf生成可编辑的矢量pdf
刘发财约 6 分钟使用 html2canvas+jspdf 生成可编辑的矢量 pdf
本文将介绍我的开源 js 库 dompdf.js，一个从未被开发者提及过的前端生成 pdf 解决方案，它可以在不依赖任何后端服务的情况下，直接在浏览器中将 html 生成为「真正的， 非图片式，可编辑的，高清晰度的」 pdf 文件。
pdf 生成示例 - 我的上一篇文章
1. 在线体验
❝dompdfjs.lisky.com.cn[1]
❞
2. Git 仓库地址 (欢迎 Star⭐⭐⭐)
❝github.com/lmn1919/dom…[2]
❞
3. 为什么是 dompdf.js
查询了前端生成 pdf 方法的相关资料，发现目前前端生成 pdf 文件的主流方法有以下几种：
| 「Puppeteer 等无头浏览器」 | ✅ 支持 JavaScript 动态内容 | ❌ 启动速度慢 ❌ 并发处理能力有限 ❌ 需要服务器环境 |
| 「jsPDF/PDFKit」 | ✅ 文件体积小 ✅ 生成速度快 ✅ 支持矢量图形 | ❌ 不支持复杂 HTML 布局 ❌ 学习成本较高 ❌ 样式支持有限 |
| 「PDFMake」 | ✅ 声明式 API，易于使用 ✅ 支持表格、图表等 ✅ 模板化程度高 | ❌ 需要重新构建文档结构 ❌ 样式定制能力有限 ❌ 复杂布局实现困难 |
| 「html2canvas + jsPDF」 | ✅ 纯前端方案 ✅ 所见即所得 | ❌ 文件体积大 ❌ 清晰度不够 ❌ 不支持文字选择 |
| 「dompdf.js」 | ✅ 快速上手，对代码入侵小 ✅ 文件体积小 ✅ 支持文字选择和编辑 ✅ 矢量图形，清晰度高 | ❌ 复杂布局可能有差异 ❌ 浏览器兼容性要求 |
很多文章都力推 html2canvas + jsPDF 方案，说明大家生成 pdf 的需求的复杂度都不怎么高，所以大部分场景下 dompdf.js 是够用的，比如报表，合同，体检报告，简历生成，一些简单的文档。
4. dompdf.js 是如何实现的？
其实 dompdf.js 也是基于 html2canvas+jspdf 实现的，但是为什么 dompdf.js 生成的 pdf 文件可以二次编辑，更清晰，体积小呢？
不同于普通的 html2canvas + jsPDF 方案，将 dom 内容生成为图片，再将图片内容用 jspdf 绘制到 pdf 上，这就导致了生成的 pdf 文件体积大，无法编辑，放大后会模糊。
html2canvas 原理简介
遍历 DOM 树 ：html2canvas 从你指定的 DOM 节点开始，递归遍历其所有子节点，构建一个内部的、描述页面结构的渲染队列。 计算样式（ getComputedStyle ） ：对于每一个节点，它会调用 window.getComputedStyle() 来获取该元素最终在浏览器中呈现的所有 CSS 属性值。这是获取视觉信息的关键，因为它包含了所有 CSS 规则（内联、内部、外部样式表）层叠计算后的最终结果。 构建渲染模型 ：它将每个 DOM 节点和其计算后的样式包装成一个渲染对象。这个对象包含了绘制该元素所需的所有信息，如位置（ top , left ）、尺寸（ width , height ）、背景、边框、文本内容、字体属性、堆叠上下文（ z-index ）等 创建 Canvas 上下文 ：在内存中创建一个 canvas 元素，并获取其 2D 渲染上下文（ CanvasRenderingContext2D ）。 模拟浏览器绘制 ：html2canvas 按照 DOM 的堆叠顺序（考虑 z-index ）和布局，遍历之前构建的渲染队列，将每个元素绘制到 Canvas 上。这个过程是将 CSS 属性 “翻译” 成 Canvas API 调用的过程：
「dompdf.js 改造了 html2canvas 的最后一步，将绘制 canvas 的 API, 换成了 jspdf 的 API」, 从而实现了从 dom 到 pdf 的操作，创建可以编辑的 pdf 文件。
5. 实现功能
6. 使用 foreignObjectRendering 渲染复杂表格，边框阴影，渐变
在 dom 十分复杂，或者 pdf 无法绘制的情况（比如：复杂的表格，边框阴影，渐变等），可以考虑使用 foreignObjectRendering。 给要渲染的元素添加 foreignObjectRendering 属性，就可以通过 svg 的 foreignObject 将它渲染成一张背景图插入到 pdf 文件中。
但是，由于 foreignObject 元素的渲染依赖于浏览器的实现，因此在不同的浏览器中可能会有不同的表现。 所以，在使用 foreignObjectRendering 时，需要注意以下事项：
foreignObject 元素的渲染依赖于浏览器的实现，因此在不同的浏览器中可能会有不同的表现。 IE 浏览器完全不支持，推荐在 chrome 和 firefox,edge 中使用。 生成的图片会导致 pdf 文件体积变大。
示例
<div style="width: 100px;height: 100px;" foreignObjectRendering>
<div
style="width: 50px;height: 50px;border: 1px solid #000;box-shadow: 2px 2px 5px rgba(0,0,0,0.3);background: linear-gradient(45deg, #ff6b6b, #4ecdc4);"
>
这是一个div元素
</div>
</div>
7. 使用
安装
npm install dompdf.js --save
基础用法
import dompdf from "dompdf.js";
dompdf(document.querySelector("#capture"), {
useCORS: true, //是否允许跨域
})
.then(function (blob) {
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = "example.pdf";
document.body.appendChild(a);
a.click();
})
.catch(function (err) {
console.log(err, "err");
});
字体支持
如果需要自定义字体，在这里[3]将字体 tff 文件转化成 base64 格式的 js 文件，中文字体推荐使用思源黑体[4], 体积较小。 在代码中引入该文件即可。
<script type="text/javascript" src="./SourceHanSansSC-Normal-Min-normal.js"></script>;
dompdf(document.querySelector("#capture"), {
useCORS: true, //是否允许跨域
fontConfig: {
fontFamily: "SourceHanSansSC-Normal-Min",
fontBase64: window.fontBase64,
},
})
.then(function (blob) {
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = "example.pdf";
document.body.appendChild(a);
a.click();
})
.catch(function (err) {
console.log(err, "err");
});
写在最后
dompdf.js 为前端 PDF 生成提供了一个新的选择。它摆脱了传统的 “截图” 模式，让我们能在客户端直接生成高质量、可编辑的结构化 PDF 文档。它特别适合用在在线简历生成、数据报告导出、电子发票打印等场景，但是复杂专业的 pdf 生成需求不建议使用。
希望这个小工具能对你有所帮助。立即去 GitHub[5] 上看看，给它一个 Star，也欢迎大家在项目中使用它！
AI编程资讯AI Coding专区指南：https://aicoding.juejin.cn/aicoding