HTML转PDF技巧｜快速生成专业PDF

HTML转PDF看似简单，实则暗藏诸多陷阱：字体丢失、样式错位、分页失控、跨域截图失败、放大模糊等问题频发，并非代码有误，而是HTML到PDF本质是重走完整渲染链，多数第三方库仅模拟部分逻辑。最可靠方案是浏览器原生打印（DevTools中Ctrl/Cmd+P→另存为PDF），零依赖且所见即所得；动态或批量场景首选Puppeteer——它通过无头Chrome真实渲染，可控性强但需精细配置字体、纸张与等待时机；而广为流传的html2canvas+jsPDF组合实为“截图拼接”，兼容性差、体积大、效果不可靠，务必慎用。真正难点不在转换本身，而在页眉页脚对齐、表格跨页不断行、中文字体清晰呈现与自动页码等细节的端到端协同，没有万能解法，唯有根据场景选对路径并深度调优。

直接用 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学习网公众号吧！