核心解法是用@media print配合分页控制属性：page-break-before/after强制分页，page-break-inside: avoid防止元素内断裂；表格需额外设thead{display:table-header-group}确保每页重现表头，并重置margin/padding及禁用背景。
打印时内容被截断或换行错乱
浏览器默认按物理页面尺寸切分内容，但 HTML 元素（比如 div、table）不自动考虑分页边界，导致文字或表格在打印预览里被硬生生劈开。这不是 bug，是 CSS 分页机制未显式干预的结果。
核心解法是用 @media print + 分页控制属性，而不是靠 <br> 或空 div 强行撑开——后者在不同打印机/驱动下表现极不稳定。
-
page-break-before: always：强制在元素前分页（适合章节标题） -
page-break-after: always：强制在元素后分页（适合长图表收尾） -
page-break-inside: avoid：阻止元素内部被分页（对table、blockquote很关键）
table 打印时跨页断裂的修复
表格是最常出问题的结构——thead 不重复、tr 被劈成两半、表头消失。单纯加 page-break-inside: avoid 到 table 上往往无效，因为浏览器对 table 的分页支持有限。
真正有效的做法是组合使用：
- 给
table加page-break-inside: avoid（小表格适用） - 给
thead加display: table-header-group（让表头在每页顶部重现） - 给
tbody tr加page-break-inside: avoid，再配合page-break-after: auto控制单行分页倾向
示例片段：
@media print {
table { page-break-inside: avoid; }
thead { display: table-header-group; }
tbody tr { page-break-inside: avoid; page-break-after: auto; }
}
避免 margin/padding 导致打印偏移
屏幕样式里的 margin 和 padding 在打印时会挤压可用区域，尤其当用户选择“无边距打印”时，可能直接把内容挤出纸张边界。Chrome 和 Edge 的打印预览有时会隐藏这部分溢出，造成“看着正常、打出来缺字”的假象。
- 打印样式中重置主体容器的
margin和padding，推荐设为0或固定小值（如5mm） - 用
@page规则统一设置页边距：@page { margin: 1cm; }（注意：IE/旧版 Edge 不支持@page的部分属性） - 禁用背景图和颜色（除非明确需要）：
* { background: transparent !important; }
JavaScript 触发打印前的必要清理
直接调用 window.print() 会把当前所有样式（包括隐藏的调试面板、浮动按钮）一起送进打印机。必须在调用前临时切换样式上下文。
- 添加一个
print-modeclass 到，并在@media print中定义其行为 - 用
matchMedia('print').addEventListener('change', ...)监听系统级打印事件，用于还原状态（比如关闭模态框） - 慎用
iframe打印方案：虽然能隔离样式，但iframe.contentWindow.print()在 Safari 和部分移动端不可靠
最简健壮流程：
document.body.classList.add('print-mode');
setTimeout(() => window.print(), 10);
// 紧跟一个微任务还原（可选）
setTimeout(() => document.body.classList.remove('print-mode'), 100);
打印分页不是像素对齐问题，而是文档流与物理页面之间的语义映射。最容易被忽略的是 thead 的 display: table-header-group 行为——它不写在打印样式里，表头就只在第一页出现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
