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 全量生效。
