HTML转PDF技巧｜快速生成PDF方法汇总

HTML转PDF看似简单，实则充满陷阱：浏览器原生打印（Ctrl/Cmd+P另存为PDF）以零依赖、高保真、完美支持中文字体和CSS样式成为静态页面的首选；Puppeteer则凭借无头Chrome真实渲染能力，为动态内容和批量生成提供最强可控性，但需精细配置字体、分页与等待时机；而广为流传的html2canvas+jsPDF组合因本质是截图拼接，普遍存在字体丢失、样式错乱、跨域报错、长页截断异常及放大模糊等硬伤，应谨慎评估再使用——真正决定质量的不是工具本身，而是对HTML结构、@media print响应、CSS分页控制与渲染生命周期的深度协同。

直接用 print() 或浏览器「另存为 PDF」最可靠，第三方库生成的 PDF 常见字体丢失、CSS 错位、分页失控——不是代码写得不对，是 HTML→PDF 本质就是渲染链重走一遍，而多数库只模拟了部分渲染逻辑。

浏览器 DevTools 打印预览导出（适合静态页面）

这是零依赖、效果最接近所见即所得的方式。Chrome / Edge / Safari 均支持，关键在于触发前让页面进入「打印就绪」状态：

• 确保关键样式加 @media print 规则，比如隐藏 .no-print 元素、显式设置 page-break-inside: avoid 防止表格断行
• 避免用 position: fixed 或 transform 布局，这些在打印模式下常被忽略或错位
• 中文字体必须用 @font-face 显式加载并声明 font-display: swap，否则导出 PDF 时大概率回退成方块
• 打开 DevTools → Ctrl+P（Win）或 Cmd+P（Mac）→ 左下角选「另存为 PDF」→ 确保「背景图形」勾选，否则 background-color 和 background-image 不会输出

用 Puppeteer 服务端生成（适合动态/批量场景）

Node.js 环境下最可控的选择，本质是启动无头 Chrome 渲染再截图 PDF，但默认参数极易翻车：

• format: 'A4' 比 width/height 更稳定；若需自定义尺寸，必须用 paperWidth/paperHeight（单位 mm），不能混用 px
• 务必设 printBackground: true，否则 CSS 背景全丢
• 中文字体问题：Linux 服务器需提前安装 fonts-wqy-zenhei 或 noto-cjk，并在启动时传入 args: ['--font-render-hinting=none']
• 等待时机很重要：别只等 DOMContentLoaded，要用 page.waitForFunction('window.isReady === true') 这类信号，确保 JS 渲染完成

jsPDF + html2canvas 的坑（慎用！）

这个组合看似轻量，实则是「把网页截图再拼成 PDF」，实际效果取决于 canvas 渲染兼容性：

• html2canvas 不支持 transform、filter、svg filter，遇到就白屏或截空
• 跨域图片（如 CDN 上的 ）会触发 canvas 污染，必须服务端代理或改用 allowTaint: true, useCORS: true（但部分浏览器仍拒绝）
• 长页面滚动截取靠 scrollY 模拟，但 html2canvas 对 position: sticky 和 flex 容器内滚动极不友好，常截出重复或漏掉区块
• 生成的 PDF 是位图，放大后模糊，且文件体积比真实 PDF 大 3–5 倍

真正难的从来不是「怎么转」，而是「怎么让页眉页脚对齐」「表格跨页不断行」「中文字体不糊」「页码自动续编」——这些都需要在 HTML 结构、CSS 分页控制、以及生成工具链之间反复对齐，没有银弹。浏览器原生打印路径最省心，Puppeteer 最可控，其余方案建议先拿一个真实页面跑通再评估。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《HTML转PDF技巧｜快速生成PDF方法汇总》文章吧，也可关注golang学习网公众号了解相关技术文章。