HTML转PDF压缩技巧分享

HTML转PDF后文件体积暴增5–10倍并非技术必然，根源在于默认嵌入整套字体、base64图片及未压缩资源；真正有效的压缩策略需三管齐下：合理配置工具参数（如wkhtmltopdf的--no-outline、--enable-local-file-access和--font-format，或Puppeteer中禁用字体子集化并精确控制页面尺寸），优先使用系统字体或预处理字体子集，同时彻底剥离base64图片、改用外部引用并提前压缩为WebP/PNG-8等高效格式——忽略字体子集与图片优化，再精妙的参数也徒劳无功。

HTML 转 PDF 时体积暴增的常见原因

直接用 wkhtmltopdf 或浏览器 printToPDF 导出 HTML，常出现 PDF 体积比原 HTML 大 5–10 倍的情况。根本原因不是“转 PDF 就该大”，而是默认行为把所有字体、图片、CSS 规则全嵌入，且未启用压缩或子集化。

wkhtmltopdf：关键参数必须加这三项

不加参数的 wkhtmltopdf input.html output.pdf 几乎必然产出臃肿 PDF。真正压体积要靠这组组合参数：

• --no-outline：禁用文档大纲（Outline），省掉结构元数据，对纯阅读文档无影响
• --enable-local-file-access：确保本地 CSS/JS/字体路径能正确加载（否则会 fallback 到默认字体，反而触发更大嵌入）
• --font-format ttf 或 --font-format woff2：显式指定字体格式，避免 wkhtmltopdf 自动降级为嵌入整套 TTF（尤其当 CSS 中用了 @font-face）

完整命令示例：

wkhtmltopdf --no-outline --enable-local-file-access --font-format woff2 \
  --page-size A4 --margin-top 10 --margin-bottom 10 \
  input.html output.pdf

CSS 里字体和图片是体积黑洞

PDF 体积飙升往往来自两处：@font-face 引入的完整字体文件、 标签中 base64 编码的图片。解决方式很直接：

• 字体：改用系统已安装字体（如 font-family: "Helvetica Neue", Arial, sans-serif;），或只 @import 字体子集（需提前用 pyftsubset 或 fonttools 提取）
• 图片：禁止在 HTML 中写 src="data:image/png;base64,..."；改用外部 src="images/chart.png"，并确保图片本身已压缩（WebP/PNG-8 优于 PNG-24）
• CSS：删掉未使用的规则，避免 @import 多个远程 CSS（每个多一次网络请求+嵌入风险）

Chrome DevTools 的 printToPDF 更可控但易踩坑

用 Puppeteer 调 Chrome 的 page.pdf() 比 wkhtmltopdf 更现代，但默认也会嵌入字体。关键控制点：

• 必须设 printBackground: true（否则背景色/图不渲染，看似小了，实则内容缺失）
• 禁用字体嵌入：在启动 Chrome 时加参数 --disable-pdf-font-subsetting（注意：这是禁用「子集」，反而让 Chrome 用系统字体渲染，不嵌入任何字形）
• 慎用 format: 'A4'：它会强制缩放适配，可能拉伸图片导致重采样变糊+体积涨；改用 width/height 指定精确尺寸（单位 mm）

Puppeteer 示例片段：

await page.pdf({
  path: 'output.pdf',
  width: '210mm',
  height: '297mm',
  printBackground: true,
  margin: { top: '10mm', bottom: '10mm' }
});

到这里，我们也就讲完了《HTML转PDF压缩技巧分享》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！