html结构直接影响打印输出质量，因其决定分页、表格完整性与表头重复等关键行为；浏览器打印引擎仅依赖display属性和dom位置，不解析语义，故flex包裹table、absolute定位水印或div嵌套table均会导致布局退化、断裂或消失。
为什么 HTML 结构直接影响打印输出质量
HTML 结构不是“写完就能打”，而是决定打印能否分页、表格是否断裂、标题是否重复的关键。浏览器打印引擎不解析语义，只依赖 display 行为和 DOM 位置——div 套 div 的编辑器内容，flex 包裹的表格容器，position: absolute 的水印层，全都会在打印时退化或消失。
常见错误现象：页面显示正常，但打印预览里只剩半屏文字；thead 只出现在第一页，第二页表格没表头；长 section 被硬切在行中间，下半截孤零零挂在新页开头。
- 避免用
flex或grid直接包裹table、pre或核心内容区块——打印时它们常被重置为display: block，导致宽度崩坏、边框错位 -
table必须是独立块级元素，不能嵌在div里再设display: flex；否则page-break-inside: avoid失效 -
contenteditable区域输出的 HTML 通常含大量无意义span和内联style，需在打印前用 JS 清洗或提取纯文本结构 - 所有分页控制点（如章节标题）应使用语义块级标签：
h1、section、article，而非span+ class
@media print 里必须重写的三类结构行为
打印不是“换皮肤”，而是切换渲染通道。浏览器会丢弃部分 CSS 计算路径，所以必须显式覆盖那些默认值不可靠的结构属性。
例如：float 在打印中几乎全失效；position: sticky 被忽略；overflow: hidden 可能裁掉跨页内容；display: inline 的标题无法触发分页。
- 强制重置布局流：
* { float: none !important; position: static !important; overflow: visible !important; } - 确保分页指令生效：目标元素必须是块级，且未脱离文档流——
h2.section-title要加display: block !important;，否则page-break-before: always无效 -
thead和tfoot必须显式声明：thead { display: table-header-group; }、tfoot { display: table-footer-group; }，不能依赖浏览器自动识别
表格跨页断裂时，DOM 层级比 CSS 更关键
很多人反复调 break-inside: avoid 却没用，是因为规范明确限制：break-inside 对 table 元素本身无效。真正起作用的是 tr 的 display 类型和父容器的布局上下文。
实测发现：Chrome/Firefox 中，只有当 tr 是 display: table-row 且未被 flex 容器包裹时，page-break-inside: avoid 才对单行生效。
- 不要给
table设break-inside: avoid——它会被忽略 - 想让整表不拆，用
table { page-break-inside: avoid; }（注意是page-break-前缀） - 想让每行不跨页，给
tr加display: table-row !important;和page-break-inside: avoid; - 如果表格由组件库生成（如 Ant Design），优先提取原始数据，用原生
table重绘，别试图 patch 组件样式
调试时最容易被忽略的 DOM 状态问题
打印预览看到的，不是你写的 HTML，而是当前 DOM 快照。JS 动态插入的内容、隐藏/显示状态、iframe 内容是否加载完成，全会影响最终输出。
典型翻车点：点击打印按钮后，window.print() 立即执行，但编辑器还没把富文本转成干净 HTML；或者 iframe 内容还在加载，父页就调用了 print()。
- 调用
window.print()前，确保目标内容已稳定渲染：可监听DOMContentLoaded或用MutationObserver观察关键节点 - 含
iframe的页面，必须单独获取其contentWindow并调用iframe.contentWindow.print()，父页@media print不穿透 - 打印前移除临时 UI 元素：比如 loading 遮罩、tooltip、弹窗浮层——它们可能被
display: none隐藏，但若用visibility: hidden或opacity: 0，仍占布局空间，干扰分页 - 测试必须用 Chrome / Edge 的「另存为 PDF」功能，它比
window.print()更贴近真实打印机行为，且能复现字体 fallback 问题
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
