原生浏览器打印（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 里独占一页”。

• 第一章

  这类标题后加 break-before: page，就能确保新章节从新页开始
• 避免对 或
  盲目加 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，导出仍可能错乱。以下检查项比选什么库更重要：

• 确保章节标题使用
  ～
  ，而非仅靠 模拟，否则 PDF 书签无法自动生成
• 禁用所有 position: fixed 或 position: absolute 元素（如悬浮按钮、吸顶导航），它们在打印时会错位或重复出现
• 在 Chrome 中打开 DevTools → Rendering 面板 → 勾选 Emulate CSS media: print，实时预览分页效果，比反复导出试错快得多

真正的难点不在“怎么转”，而在“怎么让浏览器认为这是可分页的文档”——HTML 结构是否语义清晰、CSS 是否专为打印设计、以及是否接受了“只能靠原生打印流程实现可靠章节分隔”这个前提。