Chrome打印为PDF最可靠，需设无页边距、勾选背景图形、用break-inside: avoid防断页、本地字体路径及img标签替代background-image。

Chrome 浏览器直接打印为 PDF 的核心设置

HTML5 静态网页导出 PDF 最可靠的方式，就是用 Chrome（或基于 Chromium 的 Edge、Brave）的「另存为 PDF」功能。它不依赖第三方库，兼容性好，且能保留大部分 CSS 布局（尤其是 @media print 规则）。关键不是“能不能”，而是“怎么设才不出错”。

操作路径：Ctrl+P（Windows）或 Cmd+P（macOS）→ 目标打印机选「另存为 PDF」→ 点击「更多设置」展开选项

• 页边距：选「无」或「最小」，否则可能裁掉浮动元素或绝对定位内容
• 背景图形：必须勾选，否则 background-color 和 background-image 默认不输出
• 页面方向：横向（Landscape）适合宽表格或代码块；纵向（Portrait）是默认，但需确认 body 宽度未超 A4 实际可打印宽度（约 595px）
• 缩放：建议保持「自动」；若文字过小，优先调整 CSS 中的 font-size 或使用 @page { size: A4; } 而非手动缩放

必须加的 CSS 才能控制分页和断行

浏览器默认会随意在元素中间断页，导致表格劈成两半、卡片被截断——这不是导出 bug，是没写分页控制 CSS。

/* 防止表格/卡片跨页断裂 */
table, .card, .section {
  break-inside: avoid;
}
/ 允许在列表项之间断页，但不在项内部断 /
li {
break-inside: avoid;
}
/ 强制在某元素前分页（如每个章节标题） /
h2 {
break-before: page;
}
/ 可选：定义打印专用样式 /
@media print {
body {
font-size: 12pt;
line-height: 1.4;
}
.no-print {
display: none;
}
}

注意：break-inside: avoid 在 Firefox 中支持较弱，Chrome/Edge 稳定；若仍断裂，可尝试给容器加 display: block 并确保无 float 或 flex 干扰。

字体和图标导出失败的常见原因

PDF 导出时显示方框或乱码，90% 是字体未嵌入或图标字体（如 Font Awesome）未正确加载。

• @font-face 定义的字体，必须使用 url() 指向本地相对路径（如 ./fonts/roboto.woff2），不能是 CDN 或 base64（部分版本 Chrome 会忽略）
• Font Awesome 等图标字体：确保在 HTML 中通过 加载，且 CSS 文件可被浏览器同步获取（禁用「离线模式」或检查 DevTools → Network 标签页是否有 404）
• 避免使用系统字体栈（如 font-family: -apple-system, BlinkMacSystemFont），PDF 不识别这些别名，会回落到默认衬线字体

导出后 PDF 内容缺失或错位怎么办

常见现象：空白页、图片消失、Flex 布局完全错乱——本质是浏览器在打印预览阶段对某些现代 CSS 特性支持有限。

• 图片请统一用 ，不要用 background-image（即使开了「背景图形」也可能不渲染）
• 避免 position: fixed 或 position: sticky，打印时会被忽略或错位
• Flex/Grid 布局建议降级：对关键区域（如导航栏、卡片网格）补充 display: block + float 或 inline-block 回退样式
• 如果用了 transform: scale() 或 filter，PDF 可能直接跳过该元素；改用 width/height 和原生属性控制尺寸

最稳妥的做法：在打印前临时加一个 class（如 print-ready），用 @media print 重写关键布局，而不是指望运行时 CSS 全量生效。