HTML怎样做PDF导出_html网页导出PDF实现方法【详解】

作者：袖梨 2026-06-27

html2canvas + jsPDF 导出的 PDF 不能复制文字，因其本质是将 DOM 渲染为位图再嵌入 PDF，无文字层；常见问题包括截图空白、中文乱码、长页截断等。

html 页面导出为 pdf 没有“银弹方案”，选错技术栈会在中文渲染、分页、交互元素、服务端部署上反复踩坑。直接说结论：简单页面、无权限控制、允许客户端截图 → 用 html2canvas + jsPDF；复杂布局、需可编辑文本、要打印票据 → 必须走服务端，优先选 Puppeteer 或 wkhtmltopdf；后端是 Java/.NET 且模板固定 → iText 可控但成本高。

为什么 `html2canvas` + `jsPDF` 导出的 PDF 不能复制文字？

因为它的本质是「把 DOM 渲染成一张大图，再把图塞进 PDF」。整个 PDF 就是一张位图，没有文字层，自然无法选中、搜索、复制。这在生成合同、报表时是硬伤。

常见错误现象包括：

html2canvas 截图空白或只截到顶部 —— 很可能是目标容器 display: none 或使用了 transform、filter 等 canvas 不支持的 CSS 属性
中文乱码或字体缺失 —— html2canvas 默认不嵌入字体，需提前用 @font-face 加载并确保字体文件可跨域访问
长页面被截断 —— html2canvas 默认只渲染视口内区域，必须显式设置 scrollY: 0 和 useCORS: true，再配合 jsPDF 的 addImage 分页逻辑手动切图

`Puppeteer` 生成 PDF 为什么比 `wkhtmltopdf` 更推荐？

Puppeteer 基于 Chromium，对现代 CSS（Flexbox、Grid、@media）、JavaScript 渲染、字体加载、跨域资源支持更稳定；wkhtmltopdf 用的是旧版 WebKit，遇到 position: sticky、CSS 变量、Web Font fallback 容易崩。

立即学习“前端免费学习笔记（深入）”；

实操关键点：

务必用 page.setContent(html, { waitUntil: 'networkidle0' }) 替代 page.goto(url)，避免权限拦截和 CORS 问题
中文必须指定系统字体路径或在 HTML 中内联 @font-face，否则默认显示方块 —— Puppeteer 不自动继承宿主机字体配置
分页靠 CSS 控制：@media print { .page-break { break-after: always; } }，不要依赖 jsPDF 那套分页逻辑
Linux 服务器部署时，需预装 Chromium 依赖（如 libnss3、libatk-bridge2.0-0），否则启动失败报 Failed to launch chrome

`iText` 解析 HTML 时为什么总报 `Tag not supported`？

iText7 的 HtmlConverter 对 HTML 结构极其严格：自闭合标签（如 <img>）必须写成 <img/>，<table> 必须有 <tbody>，style 属性里不能有换行或注释。它不是浏览器引擎，只是按规则解析 DOM 树。

适用场景非常明确：

你有固定 HTML 模板，且能完全控制输出结构（比如后台拼接好的报销单 HTML 字符串）
需要生成带数字签名、加密、表单域的 PDF —— 这是 iText 的强项，其他方案做不到
不依赖前端样式，所有排版用 iText 自己的 Cell/Table API 重写更稳妥

一旦混用 Vue/React 渲染后的 HTML（含 v-if、{{ }}、动态 class），iText 直接抛异常，不兼容。

本地调试时 `wkhtmltopdf` 命令行能跑，但 Node.js 调用就失败？

根本原因是环境变量和权限隔离：child_process.exec 启动的子进程看不到你终端里配置的 PATH，也拿不到 GUI 环境下的字体缓存。

排查步骤：

先在代码里用 which wkhtmltopdf 或 spawn('sh', ['-c', 'which wkhtmltopdf']) 确认路径是否真的可达
Linux/macOS 下加 --no-sandbox --disable-gpu 参数，否则 Chromium 渲染进程被杀
Windows 上若用相对路径调用（如 ./wkhtmltopdf.exe），确保工作目录（process.cwd()）正确，否则找不到依赖 DLL
图片路径必须是绝对 URL 或本地 file:// 协议，./assets/logo.png 这种相对路径会 404