pdf导出中page-break-inside: avoid基本失效，应改用break-inside: avoid-page并配合@media print，仅对块级容器如table、tbody、div等生效，且需避免absolute/fixed定位及依赖jspdf+html2canvas的css分页。
page-break-inside: avoid 在 PDF 导出中基本失效，别再依赖它
这个属性在 Chrome 打印预览里就已不可靠，到了 wkhtmltopdf、Puppeteer 或 jsPDF + html2canvas 等 PDF 导出场景，几乎完全被忽略。不是你 selector 写得不够具体，是底层渲染引擎压根不实现 CSS2 的 page-break-* 系列——它们只响应 Paged Media Level 3 的 break-inside，且仅限特定上下文。
导出 PDF 时真正能用的分页控制是 break-inside: avoid-page
必须配合 @media print 使用，且只对块级容器生效。常见有效目标：
-
table：整表不跨页（小表格适用） -
div.report-section：自定义报表区块 -
figure、pre、section：语义上不可分割的内容单元 -
tbody：长表格中按逻辑段分页（比单个tr更可靠）
无效写法示例：tr { break-inside: avoid-page } —— tr 不是块级容器，浏览器直接跳过；div { position: absolute; break-inside: avoid-page } —— 定位元素被规范禁止分页控制。
表格导出 PDF 时行被劈开？换思路，别硬保 tr
试图给 tr 加 break-inside 是最常踩的坑。现代 PDF 渲染器（如 Puppeteer v22+、wkhtmltopdf 0.12.6+）对 tbody tr 的 break-inside: avoid 有极有限支持，但不保证。更稳做法：
- 用
tbody { break-inside: avoid-page }控制整个 tbody 不跨页（适合中等长度数据） - 对超长表格，改用
page-break-after: auto配合tbody:nth-child(odd)主动分段 - 必须加
border-collapse: collapse，否则边框在 PDF 中重复渲染导致错位 - 表头复现靠
thead { display: table-header-group }，不是靠 JS 插入
jsPDF + html2canvas 场景下，CSS 分页控制基本无效
这套组合本质是把 DOM 截图为 canvas 再拼进 PDF，所有 CSS 分页规则（包括 break-inside）在截图阶段已被丢弃。此时唯一可控的是：
- 提前计算每页高度（如 A4 减去页边距后约 27cm），用 JS 拆分
tbody为多个子块 - 给每个子块加
page-break-after: always（仅对后续纯 HTML 打印有效，对 canvas 无用，但可辅助调试） - 导出前临时移除
position: fixed/absolute元素，否则它们会出现在每页左上角或直接消失 - 测试必须真机导出 PDF 文件，不能只看 Chrome 打印预览 —— 两者渲染路径完全不同
复杂点在于：同一份 HTML，Chrome 打印、Puppeteer、wkhtmltopdf、jsPDF 的分页行为互不兼容，没有“一次写完全平台生效”的写法。得按目标导出工具单独适配。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
