17370845950

最稳妥方式是在主CSS中直接追加@media print规则，兼容性好、维护成本低，支持复用类名和CSS变量，且能同步DOM结构变化；独立print.css需注意加载时机和浏览器兼容性问题。

用 @media print 写在主 CSS 里最稳妥

直接在现有样式表中追加 @media print 规则，是兼容性最好、维护成本最低的方式。浏览器对内联媒体查询的支持非常成熟，连 IE9 都能正确识别。

• 不用额外请求文件，避免打印时因网络延迟或跨域导致样式丢失
• 可以复用已有类名和变量（比如 --primary-color），无需重复定义
• 修改响应式逻辑时，打印样式能同步感知 DOM 结构变化（例如折叠的侧边栏在打印时是否应展开）

@media print {
  body {
    font-size: 12pt;
    color: #000;
  }
  .header, .nav, .ads {
    display: none !important;
  }
  .content {
    page-break-inside: avoid;
  }
}

用 引入独立 CSS 文件要注意加载时机

这种方式看似清晰，但容易踩两个坑：一是文件未加载完成就触发打印，二是部分浏览器（尤其是 Safari 和旧版 Edge）会忽略未完全解析的 print 样式表。

• 务必把 放在 顶部，不要 defer 或动态插入
• 避免在 print.css 中依赖 @import，它会阻塞渲染且在打印预览中不可靠
• 如果主站用了 CSS-in-JS（如 Emotion、Styled Components），单独 link 的 CSS 无法继承运行时注入的全局规则

window.matchMedia("print") 不能用来动态切换样式

这个 API 只反映当前是否处于打印预览模式（比如 Chrome 的 Ctrl+P 窗口打开时返回 matches: true），但它不触发重绘，也不适合做样式开关。

• 监听 matchMedia("print").addEventListener("change", ...) 在大多数浏览器中不会被触发 —— 打印预览不是“媒体查询变更”，而是独立渲染通道
• 不要试图用 JS 动态增删 class 来模拟 print 效果，这会导致打印输出与预览不一致（例如分页错乱）
• 真正需要 JS 干预的场景极少，比如导出 PDF 前临时隐藏水印，此时应配合 window.print() 前后手动操作 DOM

常见失效原因：CSS 优先级和 !important 的误用

打印样式被主样式覆盖，往往不是因为没生效，而是选择器权重不够或属性本身不支持打印上下文。

• color、background-color、font-size 有效；但 box-shadow、transform、filter 在绝大多数浏览器打印中被忽略
• 用 display: none 隐藏元素比 visibility: hidden 更可靠 —— 后者仍占位，可能影响分页
• 如果用了 CSS 框架（如 Bootstrap），它的 .d-none 类默认不带 @media print，需自行覆盖或改用 .d-print-none（Bootstrap 5+ 提供）

打印样式最难控制的是分页行为，page-break-before、break-inside 这些属性在不同浏览器中表现差异大，建议只在关键容器上谨慎使用，别指望它像 Flex/Grid 那样精确布局。