打印样式必须使用@mediaprint独立声明，不能依赖JS切换class，以避免样式污染。@page规则与@mediaprint平级，用于控制纸张边距和尺寸。表格跨页需设置thead和tr的display值，有效防止表格断裂。推荐使用data-print属性标记打印区域，避免与框架同名class冲突。以上方法可确保打印效果稳定。
写打印样式有个核心原则：必须使用独立声明，不能依赖 JavaScript 切换 class 来“模拟”打印模式。如果你调用了 window.print()，页面看着变了，但打印预览里导航栏还在——这不是 JS 没生效，而是浏览器压根没走打印样式通道。实际上，浏览器的打印引擎只认 @media print 这一个“通关密钥”，其他什么 print-mode 类、style 属性修改，甚至 iframe 里的 JS 都无效。
常见误区是先用 .no-print { display: none; } 配合 JS 切换 class。但正确做法是直接在 @media print 里写 .no-print { display: none !important; }。而且这块 CSS 必须作为独立块存在，不能嵌套在其他媒体查询或规则里。
长期稳定更新的攒劲资源： >>>点此立即查看<<<
推荐的做法是用外链加载：。这里有个细节容易被忽略——media 属性值大小写敏感，写 PRINT 或 screen,print 都无效。也不建议把 @media print 写在主 CSS 文件末尾，容易因为前面的 .container { width: 1200px; } 权重问题被覆盖。
data-print="true" 标记内容区域，别依赖 class="no-print"靠 class 来隐藏非内容区，存在潜在风险：容易和 Ant Design、Bootstrap 等框架的同名 class 冲突，导致误删按钮或弹窗 DOM。而 data-print="true" 是显式声明“这是我要打印的内容”，JS 提取更精准，CSS 也更干净。
提取逻辑也更稳妥：document.querySelector('[data-print="true"]')。注意要写全值，避免用模糊匹配 [data-print]，否则可能匹配到广告脚本偷偷加的属性。
@media print { * { display: none; } [data-print="true"] { display: block; } }