DomPDF.js 简介
DomPDF.js 是一个用于 将 HTML 页面转换为 PDF 文档的前端 JavaScript 库。开发者可以直接在浏览器中把网页中的 DOM 元素导出为 PDF，无需服务器端渲染。它生成的 PDF 文件为 矢量格式而非截图图片，因此文本可选择、可复制，并且在放大时仍然保持清晰。
DomPDF.js GitHub：https://github.com/lmn1919/dompdf.js
与传统方案（例如使用 html2canvas 截图再导出 PDF）不同，DomPDF.js 采用了一种新的思路：浏览器先计算页面的 DOM 布局与 CSS 样式，然后库将这些布局信息转译为 PDF 的绘制指令，从而生成真正结构化的 PDF 文档。这种方式带来的优势包括 PDF 文件体积更小、文字可搜索、打印效果更好，同时还能支持较长文档的分页输出。
DomPDF.js 的核心特点
DomPDF.js 的设计目标是让开发者可以使用熟悉的 HTML 和 CSS 来创建 PDF，而不需要手动绘制 PDF 布局。
首先，它支持在浏览器端直接生成 PDF，不需要服务器参与，因此部署成本较低，非常适合前端应用或 SaaS 系统中的导出功能。其次，该库支持较丰富的样式能力，包括字体、边框、背景、图片以及 SVG 等元素，并可以自动处理分页和长文档布局。
此外，DomPDF.js 可以生成真正的矢量 PDF 文档，而不是将页面截图转换为图片，这意味着生成的文档在放大时不会模糊，文字也可以被复制和搜索。
不过需要注意的是，由于它是基于 DOM 渲染，因此某些复杂 CSS 或布局在 PDF 中可能与浏览器显示略有差异，这也是许多前端 HTML 转 PDF 方案的共同限制。
DomPDF.js 的安装方式
在项目中使用 DomPDF.js 可以通过 npm 或 CDN 两种方式进行引入。
如果是基于 Node.js 或现代前端框架项目，可以直接通过 npm 安装：
npm install dompdf.js安装后在 JavaScript 文件中引入即可使用。
如果是普通网页项目，也可以通过 CDN 方式加载脚本：
<script src="https://cdn.jsdelivr.net/npm/dompdf.js@latest/dist/dompdf.js"></script>DomPDF.js 使用 Promise 作为返回方式，因此在较旧浏览器中可能需要引入 Promise 的 polyfill 才能正常运行。
DomPDF.js 的基本使用方法
DomPDF.js 的使用方式非常简单，开发者只需要指定一个 DOM 元素作为 PDF 的生成内容即可。
下面是一个基础示例：
import dompdf from "dompdf.js";
dompdf(document.querySelector("#capture"), {
useCORS: true
})
.then((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((err) => {
console.error(err);
});在这个示例中，脚本会读取 #capture 元素中的 HTML 内容，然后根据 DOM 布局生成一个 PDF 文件，并自动触发下载。
如果页面内容较长，还可以开启分页功能，通过配置 pagination 选项来控制 PDF 的页眉、页脚以及页面尺寸，使生成的文档更加规范。
DomPDF.js 的应用场景
在现代 Web 开发中，HTML 转 PDF 的需求非常常见，例如生成电子发票、订单详情、合同文档、报表导出以及在线文档下载等。
DomPDF.js 的优势在于它完全运行在浏览器端，因此特别适合单页应用（SPA）、后台管理系统以及在线编辑器等场景。开发者可以直接将页面内容导出为 PDF，而无需搭建额外的服务器渲染服务。对于需要快速实现“导出 PDF”功能的 Web 项目来说，DomPDF.js 是一个非常轻量且易于上手的解决方案。