打印样式必须用独立的@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></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> 加 <code>page-break-inside: avoid 没用，浏览器照样把 <thead> 留在第一页、<code><tbody> 剩一半在第二页开头。表头不会自动重复，这是规范限制，不是 bug。<p>关键组合拳：<code>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 值重置——这两处不写对，其他再精细也没法防断裂。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
