HTML 页面打印样式的结构预备

打印样式必须用独立的@media print包裹，它是浏览器打印引擎唯一识别的规则；需配合@page控制纸张尺寸与边距，并重置thead为table-header-group以防止表格跨页断裂。

打印样式必须用 @media print 独立包裹，不能靠 class 切换

调用 window.print() 后页面看起来变了，但打印预览里导航栏还在——这不是 JS 没生效，是浏览器压根没走打印样式通道。只有 @media print 是打印引擎唯一认的“通关密钥”，其他任何 print-mode 类、style 属性修改、甚至 iframe 里的 JS 都无效。

常见错误写法：.no-print { display: none; } + JS 切 class；正确做法是直接在 @media print 里写 .no-print { display: none !important; }。

• @media print 必须作为独立 CSS 块存在，不能嵌套在其他媒体查询或规则里
• 推荐外链加载：<link rel="stylesheet" href="print.css" media="print">，路径要对，media 值大小写敏感（PRINT 或 screen,print 都不生效）
• 不要把 @media print 写在主 CSS 文件末尾——容易被前面的 .container { width: 1200px; } 覆盖

用 data-print="true" 标记内容区域，别依赖 class="no-print"

靠 class="no-print" 隐藏非内容区，容易和 Ant Design、Bootstrap 等框架的同名 class 冲突，导致误删按钮或弹窗 DOM。而 data-print="true" 是显式声明“这是我要打的内容”，JS 提取精准，CSS 也干净。

提取逻辑更稳：document.querySelector('[data-print="true"]')，不会匹配到广告脚本偷偷加的 data-print 属性——必须写全值，避免用模糊匹配 [data-print]。

立即学习“前端免费学习笔记（深入）”；

• 标记示例：<main data-print="true"></main>，而非 <main class="print-content"></main>
• 配套 CSS：@media print { * { display: none; } [data-print="true"] { display: block; } }
• 如果页面含 <iframe>，父页的 @media print 不会穿透生效，需单独为 iframe 内容写样式或提前提取 DOM

@page 规则必须和 @media print 平级，不能嵌套其中

只写 @media print { body { margin: 10mm; } } 是没用的——这个 margin 作用于内容区域，不是纸张本身。真正控制 A4 尺寸、物理边距、首页页眉空间的是 @page，它必须和 @media print 同级出现，且语法非法：不能写在 @media print 里面。

常见错误现象：第二页顶部空一大截、左右留白过大、内容被裁切。调试时用 Chrome DevTools → Rendering → Emulate CSS media: print，比反复点 Ctrl+P 快得多。

• 基础写法：@page { size: A4; margin: 15mm; }
• 首页特殊处理：@page :first { margin-top: 25mm; }
• IE11 兼容性有限，优先保 size 和 margin，其他属性慎用

表格跨页断裂必须同时处理 thead 显示模式和 tr 分页行为

只给 <table> 加 page-break-inside: avoid 没用，浏览器照样把 <thead> 留在第一页、<tbody> 剩一半在第二页开头。表头不会自动重复，这是规范限制，不是 bug。

关键组合拳：thead { display: table-header-group; } + tr { page-break-inside: avoid !important; } + display: table-row !important;。否则某些 reset.css 或框架会覆盖默认 display，导致分页失效。

• 强制宽度：table { width: 100% !important; border-collapse: collapse; }，禁用 max-width 或固定 px 值
• 避免用 flex/grid 包裹表格容器——打印引擎对它们支持极弱
• Safari 移动端根本没实现 window.print()，调用后静默失败；旧版 Edge 会重复渲染 position: fixed 元素

实际落地时最容易被忽略的，是 @page 和 @media print 的层级关系，以及表格中 thead 的 display 值重置——这两处不写对，其他再精细也没法防断裂。