最可靠方法是用 @media print { .no-print { display: none !important; } } 隐藏打印元素，避免全局隐藏；display: none 彻底移除元素，visibility: hidden 仍占位且影响无障碍；动态插入需在 print 前添加、打印后清理样式。
打印时用 @media print 隐藏元素最可靠
直接在普通 CSS 里写 display: none 会永久隐藏，打印时也不显示——这不是“隐藏打印内容”，而是“彻底不渲染”。真正该用的是媒体查询隔离打印样式。
常见错误是把打印样式写成全局规则，比如：.no-print { display: none; }，结果页面一加载就看不见了。
- 必须限定在
@media print块内，例如：@media print { .no-print { display: none !important; } } - 加
!important是为了覆盖可能存在的内联样式或高权重规则 - 类名建议统一用
no-print或print-hidden，避免和业务类名冲突
visibility: hidden 和 display: none 在打印中效果一样？
不一样。虽然两者在打印预览里都“看不见”，但行为差异会影响布局和可访问性。
-
display: none：元素完全脱离文档流，不占空间，打印时彻底移除 -
visibility: hidden：元素仍占位，只是不可见；打印时多数浏览器仍会保留空白区域（尤其含 padding/margin 的容器） - 对屏幕阅读器而言，
display: none会让内容被忽略，visibility: hidden通常仍可读取——如果要兼顾无障碍，得额外加aria-hidden="true"
动态添加打印样式表容易漏掉的两个时机
有些场景需要 JS 控制打印样式（比如点击按钮后临时隐藏侧边栏），这时候不能只靠 CSS 文件。
- 必须在调用
window.print()之前 插入样式，否则浏览器可能已缓存旧样式 - 打印结束（用户关闭对话框或取消）后，记得移除临时样式，否则后续页面交互异常（比如侧边栏再也点不开）
- 推荐做法：
const style = document.createElement('style'); style.textContent = '@media print { .sidebar { display: none; } }'; document.head.appendChild(style); window.print(); // 注意：这里不能立即 remove，需监听 beforeprint/afterprint（兼容性差）或 setTimeout 延迟清理
Chrome 和 Edge 对 @media print 的解析差异
Chrome 115+ 开始默认启用“精简打印预览”，会跳过部分未显式声明的打印样式，Edge（基于 Chromium）同理。
- 如果写了
@media print and (color)，但打印机是黑白的，某些版本 Chrome 会忽略整段规则 - 稳妥写法是只用基础
@media print，不加其他条件表达式 - 测试时务必打开开发者工具 → “Rendering” 面板 → 勾选 “Emulate CSS media type: print”，而不是只依赖打印预览窗口
display: flex，而你只对它的子元素加了 display: none，结果父容器仍占满一行——这种布局残留，在 PDF 导出时特别明显。
