如何将 HTML 转换为 PDF

从HTML创建PDF对于生成发票、报告、信件、证书以及任何您想用CSS控制布局但以PDF分发的文档都很有用。基于浏览器的HTML到PDF转换器使用您自己浏览器的渲染引擎,所以结果与您在实时预览中看到的相匹配,无需服务器上传。

如何将HTML转换为PDF

1. 粘贴您的HTML:在编辑器中输入您的HTML代码,包括任何内联CSS或<style>标签。代码可以包括带标题、表格、图像和样式的完整页面结构。
2. 预览输出:实时预览显示您键入时PDF的确切外观。调整您的HTML和CSS,直到预览与您想要的匹配。
3. 生成并下载:点击生成按钮在浏览器中创建PDF,然后立即下载。

您可以创建什么

• 发票和收据:带有公司品牌、行项目和总计的结构化表格
• 报告:带有标题、段落、图表和数据表的格式化文档
• 证书:带有自定义字体、边框和居中文本的样式化布局
• 信件:带有页眉、正文和签名区域的专业通信
• 简历:设计的布局,可作为干净的PDF导出用于求职申请
• 门票和活动通行证:带有与会者信息的结构化二维码块
• 运输标签:邮政承运商的标准化格式
• 登机牌和确认:在线预订的打印携带版本
• 邀请函:带有图像、字体和装饰边框的样式化卡片

HTML到PDF转换的简史

在早期网络(1995-2005)中,从HTML创建PDF需要服务器端工具:Apache FOP(1999)、PrinceXML(2002)或wkhtmltopdf(2010),所有这些都在后端服务器上运行,需要上传内容。输出质量差异巨大,因为每个渲染引擎实现CSS的方式不同。

2014年,随着jsPDF和html2pdf.js等使用HTML5 Canvas对内容进行光栅化的库,浏览器端转换变得实用。对于简单文档,结果还不错,但在复杂布局和可选文本上失败。

突破是Chromium的无头模式(2017),它公开了Chrome用于普通页面的相同渲染引擎。Puppeteer(Node.js,2017)使开发人员可以访问服务器端Chromium PDF生成。基于浏览器的转换器现在使用带有@page CSS规则的Print API(window.print()),这与Chromium的无头模式使用的路径相同,在预览和PDF之间提供相同的输出。

2026年,基于浏览器的HTML到PDF对于大多数文档来说是正确的选择。服务器端渲染只对非常大的文档(100+页)、自动批处理或当您需要合并来自多个来源的PDF时才有意义。

PDF输出的样式提示

使用内联样式或<style>标签:不加载外部样式表。将您所有的CSS要么内联放在元素上,要么放在HTML的<style>块中。

设置页面边距:使用CSS @page { margin: 20mm; }来控制PDF中内容周围的空白。

使用适合打印的单位:mm、cm和pt在PDF中比px或rem更可预测。使用mm表示需要匹配现实世界尺寸的边距和间距。

避免视口相关的布局:百分比宽度和固定像素宽度效果最好。视口单位(vw、vh)在PDF输出中可能不会按预期表现。

控制分页符:使用page-break-before、page-break-after和page-break-inside(或较新的break-before、break-after、break-inside)来控制新页面的开始位置。break-inside: avoid防止单个块跨页面分割。

使用@media print进行仅PDF规则:@media print { ... }中的任何CSS仅在生成PDF时应用,不在预览中。对于隐藏仅屏幕元素(如导航栏)很有用。

CSS打印模式示例

@page {
  size: A4;
  margin: 20mm 15mm;
}

@media print {
  .no-print { display: none; }
  h1 { page-break-before: always; }
  table { page-break-inside: avoid; }
  a { color: black; text-decoration: none; }
}

body {
  font-family: 'Helvetica', sans-serif;
  font-size: 11pt;
  line-height: 1.4;
  color: #1a1a1a;
}

页面尺寸

常见的@page size值:

• A4(210 × 297 mm)- 美国以外的全球默认值
• letter(8.5 × 11 in)- 美国默认值
• legal(8.5 × 14 in)- 美国法律文件
• A3(297 × 420 mm)- 海报、计划
• A5(148 × 210 mm)- 小册子、传单
• 自定义:size: 100mm 150mm用于任何尺寸

添加landscape表示横向方向:size: A4 landscape。

常见陷阱

• 外部字体不加载:托管在外部CDN上的Web字体可能无法嵌入。在<style>标签内使用@font-face和base64编码的字体文件,或者坚持使用系统字体(Helvetica、Times、Arial、Courier)。
• 图像加载缓慢或根本不加载:生成PDF时,外部图像可能尚未准备好。使用base64数据URI保证包含:<img src="data:image/png;base64,iVBORw0KGgoAAAA...">。
• 打印时背景颜色被剥离:浏览器默认在打印时剥离背景颜色和图像以节省墨水。将-webkit-print-color-adjust: exact; print-color-adjust: exact;添加到您的body或特定元素。
• CSS Grid布局损坏:较旧的PDF引擎不完全支持CSS Grid。使用实时预览测试;如果Grid产生意外结果,请回退到table或Flexbox。
• 表格行中间的分页符:使用tr { page-break-inside: avoid; }保持行在一起,或thead { display: table-header-group; }在每页重复表头。
• 像素大小与物理尺寸不匹配:打印时1 CSS px = 1/96英寸。所以width: 96px框在PDF中恰好为1英寸宽。使用mm或pt进行明确的物理尺寸。
• 超链接失去颜色:PDF使用其CSS定义的颜色渲染<a>标签。如果您想要黑色文本但功能性超链接,请使用color: black,并让PDF阅读器的下划线视觉指示链接。

需要考虑的替代方案

• 直接从浏览器打印到PDF(Ctrl/Cmd+P,然后「另存为PDF」):零设置,适用于您可以打开的任何网页。最适合一次性转换。
• 服务器端渲染(Puppeteer、Playwright、PrinceXML):用于批量生成、自动化或非常大的文档。需要开发设置。
• Markdown到PDF:如果您用Markdown编写,专用工具(Pandoc、Marp、Typora)在一步中处理转换,无需HTML脚手架。
• 文档模板(DocRaptor、Tectonic、LaTeX):用于高度排版的文档(学术论文、书籍),您需要精确控制字距、连字、数学。

对于日常商业文档(发票、报告、证书),浏览器HTML到PDF转换器更快且同样精致。

提示

• 先预览:在生成之前始终检查实时预览。在HTML上迭代比每次生成新的PDF快得多。
• 对图像使用base64:将图像转换为base64数据URI以保证在PDF中包含。外部URL可能因CORS限制而失败。
• 保持简单:复杂的CSS布局(嵌套网格、重叠定位元素)可能无法完美渲染。更简单的布局产生更可靠的PDF。
• 测试分页符:对于多页文档,使用page-break-before: always控制新页面的开始位置。
• 打印模式CSS:将您的最终样式包装在@media print { ... }中,使它们仅应用于生成的PDF,而不是预览。对于隐藏屏幕UI元素很有用。
• 使用语义HTML:<h1>、<h2>、<p>、<table>比到处都是<div>产生更干净的可访问PDF。当用户打开PDF时,屏幕阅读器正确解析它们。

隐私和机密文件

HTML到PDF转换器完全在您的浏览器中运行。您粘贴的HTML、嵌入的图像和生成的PDF都保留在您的设备上。没有任何东西被上传到服务器、记录或与任何人共享。

这很重要,因为HTML到PDF的输入通常是敏感的:带有客户名称的发票数据、带有定价条款的合同草案、带有财务数字的内部报告、带有个人信息的证书。云HTML到PDF服务按设计将您的HTML发送到他们的服务器,在那里生成PDF,然后发送回来。一些保留输入用于「改进」或分析。对于包含机密信息的文档,基于浏览器的转换器是更安全的选择。

基于浏览器的转换在页面加载后也可以离线工作,并且足够快,可以在您迭代HTML时即时反馈。