为什么要 HTML 转 PDF
网页内容想打印、归档、离线分享，转成 PDF 最方便。HTML 转 PDF 把动态网页变成固定文档。
常见场景：
- 网页文章保存
- 在线发票/收据生成
- 报告导出
- 电子书制作
HTML 转 PDF 的方式
浏览器打印
最简单方式：浏览器里 Ctrl+P，目标选"另存为 PDF"。浏览器渲染引擎直接把网页转 PDF。
优点：免费、CSS 支持好。 缺点：手动操作，不适合批量；网页的交互元素可能干扰。
在线工具
- 输入网页 URL 或粘贴 HTML
- 工具渲染并转换
- 下载 PDF
浏览器端处理，内容不上传。
程序库
开发场景用程序库：
- JavaScript：Puppeteer（无头 Chrome）、jsPDF
- Python：pdfkit、WeasyPrint
- 服务端：wkhtmltopdf
CSS 样式处理
CSS 支持度
不同转换引擎对 CSS 支持不同：
- 浏览器引擎（Chrome）：支持最全，flex、grid 都行
- wkhtmltopdf：基于旧 WebKit，不支持新 CSS
- WeasyPrint：支持大部分 CSS 2.1，部分 CSS 3
转 PDF 前确认引擎支持的 CSS 特性。
打印专用 CSS
用 @media print 写打印专用样式：
@media print {
.no-print { display: none; } /* 隐藏不打印的元素 */
body { font-size: 12pt; } /* 打印用 pt 不用 px */
a { text-decoration: none; } /* 链接去掉下划线 */
}
隐藏交互元素
网页里的导航、按钮、广告转 PDF 没意义。用 @media print 隐藏：
@media print {
nav, footer, .ad, .sidebar { display: none; }
}
颜色处理
- 屏幕用 RGB，PDF 打印用 CMYK
- 背景色默认不打印，要强制打印设
-webkit-print-color-adjust: exact - 深色背景转 PDF 耗墨多，考虑改成浅色
分页控制
分页符
CSS 控制分页：
h1 { page-break-before: always; } /* 标题前分页 */
table { page-break-inside: avoid; } /* 表格不被切断 */
img { page-break-inside: avoid; } /* 图片不被切断 */
分页属性
page-break-before：元素前分页page-break-after：元素后分页page-break-inside：元素内不分页
避免孤行寡行
p { orphans: 3; widows: 3; } /* 段落末尾/开头至少 3 行 */
页眉页脚
浏览器打印
浏览器打印对话框里设页眉页脚（页码、标题、URL）。但样式有限。
程序库生成
Puppeteer 等 library 可自定义页眉页脚：
const pdf = await page.pdf({
displayHeaderFooter: true,
headerTemplate: '<div style="font-size:9pt;">报告标题</div>',
footerTemplate: '<div>第 <span class="pageNumber"></span> 页</div>',
margin: { top: '60px', bottom: '60px' }
});
图片处理
图片路径
HTML 里图片用绝对路径或 base64：
- 绝对路径：
<img src="https://example.com/img.png"> - base64：
<img src="data:image/png;base64,..."> - 相对路径：转 PDF 时可能找不到，用绝对路径或 base64
base64 嵌入
小图用 base64 嵌入，避免路径问题：
<img src="data:image/png;base64,iVBORw0KGgo...">
大图 base64 会让 HTML 变大，权衡使用。
图片清晰度
- 用高分辨率图片
- 图片不要放大超过原始尺寸
- 矢量图（SVG）转 PDF 最清晰
字体处理
字体加载
网页用 Web Font（Google Fonts 等），转 PDF 时字体要加载完成。程序库转换时确保字体加载完再转。
字体嵌入
PDF 要嵌入字体才能在任何设备显示一致。转换工具一般自动嵌入。
通用字体
用通用字体（Arial、Times New Roman、宋体）避免字体问题。
用 DocsAll 转换
- 输入网页 URL 或粘贴 HTML 代码
- 工具渲染网页
- 转换为 PDF
- 下载
浏览器端处理，内容不上传服务器。
常见问题
样式丢失
- CSS 没加载（外部 CSS 路径错误）
- 用了引擎不支持的 CSS 特性
- 解决：用内联 CSS，用支持的 CSS 特性
分页切断内容
- 没设分页控制
- 解决：加 page-break-inside: avoid
图片不显示
- 路径错误
- 跨域限制
- 解决：用绝对路径或 base64
中文乱码
- 字体不支持中文
- 编码不是 UTF-8
- 解决：用支持中文的字体，HTML 声明 UTF-8 编码
背景色没打印
- 浏览器默认不打印背景
- 解决：CSS 设
-webkit-print-color-adjust: exact，或打印对话框勾选"背景图形"
页面太宽
- 网页宽度超过 PDF 页面
- 解决：调整 CSS 宽度，或换横向纸张
小结
HTML 转 PDF 核心是 CSS 样式处理和分页控制。用 @media print 写打印样式，隐藏交互元素。分页用 page-break 属性控制。图片用绝对路径或 base64。DocsAll HTML 转 PDF 工具 浏览器端运行，内容不外传。