原生浏览器打印（Ctrl+P）是目前最稳定、兼容性最好且真正支持按章节分页的PDF导出方案，关键在于HTML语义化结构与@media print中break-before等CSS分页控制配合，而非依赖jsPDF等JS库。
直接用浏览器打印功能（Ctrl+P / Cmd+P）导出 HTML 为 PDF，是目前最稳定、兼容性最好、且真正支持「按章节」分页的方案——前提是 HTML 结构本身已用语义化标签或 CSS 分页控制做好章节切分。
用 @media print + break-before 强制章节分页
浏览器 PDF 导出本质是触发打印样式，所以必须靠 CSS 控制分页逻辑。关键不是“转 PDF 的工具”，而是“让每个章节在 PDF 里独占一页”。
-
<h2 class="chapter">第一章</h2>这类标题后加break-before: page，就能确保新章节从新页开始 - 避免对
<div> 或 <code><p></p>盲目加break-before，容易因内容过短导致空白页；优先作用于语义明确的章节容器或标题元素 - Chrome 和 Edge 支持完整分页属性（
break-before、break-after、break-inside: avoid），Firefox 部分支持，Safari 较弱；生产环境建议只依赖 Chrome/Edge 打印
body {
font-family: "Noto Serif CJK SC", serif;
}
.chapter {
break-before: page;
}
h1, h2 {
break-after: avoid;
}
p {
break-inside: avoid;
}
为什么不用 jsPDF 或 html2canvas 做章节 PDF？
这类 JS 库本质是截图或重绘，无法理解 HTML 的语义结构，更无法自动识别“哪一段是第一章”。强行按 DOM 节点切分，会遇到：
-
html2canvas截图时丢失 CSS 分页、字体嵌入、跨页表格，且长页面易内存溢出 -
jsPDF+html2canvas组合导出的 PDF 没有真实文字层（搜索/复制失效），章节标题无法生成书签 - 所有基于 Canvas 的方案都不支持 CSS
@page规则（如页眉页脚、页码），而原生打印支持
导出前必须检查的三件事
哪怕用了正确 CSS，导出仍可能错乱。以下检查项比选什么库更重要：
立即学习“前端免费学习笔记（深入）”；
- 确保章节标题使用
<h1></h1>～<h6></h6>，而非仅靠<div style="font-size: 24px"> 模拟，否则 PDF 书签无法自动生成 <li>禁用所有 <code>position: fixed或position: absolute元素（如悬浮按钮、吸顶导航），它们在打印时会错位或重复出现 - 在 Chrome 中打开 DevTools →
Rendering面板 → 勾选Emulate CSS media: print，实时预览分页效果，比反复导出试错快得多
真正的难点不在“怎么转”，而在“怎么让浏览器认为这是可分页的文档”——HTML 结构是否语义清晰、CSS 是否专为打印设计、以及是否接受了“只能靠原生打印流程实现可靠章节分隔”这个前提。
