@media print中display: none是唯一可靠写法，必须用@media print包裹并加!important，配合.no-print等语义化类名显式隐藏导航栏、广告位等非内容元素，避免visibility:hidden或内联样式导致留白或永久隐藏。
@media print 中 display: none 是唯一可靠写法
打印时想让导航栏、广告位、按钮消失，必须用 @media print 包裹 display: none，其他方式基本会失效。很多人误以为 visibility: hidden 或内联 style="display: none" 也能起作用，其实它们在打印预览里大概率无效或留白占位。
常见错误现象：
-
visibility: hidden写在@media print里，但打印出来元素还在——因为该属性不影响布局，浏览器仍按原尺寸分页 - 直接给元素加
style="display: none"，结果页面一加载就看不见了——这不是“打印隐藏”，是“永远隐藏” - 用了
media="screen"的<link>标签引入样式表，导致@media print规则根本没加载
正确写法（推荐语义化类名）：
@media print {
.no-print,
header,
footer,
.print-btn,
aside,
.ad-banner {
display: none !important;
}
}注意：!important 是必要的，尤其对抗 Vue/React 渲染后可能带的内联样式或高权重组件样式。
立即学习“前端免费学习笔记（深入）”；
为什么不能只靠 class 切换 + window.print()
点击按钮后临时加 no-print 类再调用 window.print()，看似简单，但实际极易失败——因为浏览器在触发打印预览前，可能还没完成样式重绘。
真实场景中容易踩的坑：
- JS 动态添加类后立刻调用
window.print()，但样式未生效，非目标区域照常打印 - 用了
setTimeout等“页面就绪”，反而因时机不可控导致漏隐藏或白屏 - 第三方弹窗、toast、modal 没带
no-print类，且 JS 插入 DOM 时未同步处理，这些元素会意外进入打印流
稳妥做法是：提前在 HTML <head> 里声明好 @media print 规则，不依赖运行时 JS 控制显隐。若必须动态控制（比如切换报表视图），应插入临时 <style> 标签并确保它在 window.print() 前已挂载到 DOM。
position: fixed 元素必须额外处理
像“回到顶部”按钮、“悬浮客服”这类 position: fixed 元素，在部分旧版 Chrome 和 Edge 中，即使加了 display: none，仍可能在每页顶部重复渲染或留下空白占位。
此时单靠 display: none 不够，得组合使用：
@media print {
.back-to-top,
.floating-chat {
visibility: hidden !important;
pointer-events: none !important;
}
}原因：visibility: hidden 能更稳定地切断渲染管线，pointer-events: none 防止其在打印预览中意外触发交互逻辑（尤其 Electron 封装应用里常见）。
别忘了检查是否有 transform 或 will-change 的容器——它们在打印引擎里状态未重置，也可能导致错位或残留。
background-image 和字体单位要显式重置
浏览器默认禁用背景图和半透明色打印，background-image 和 background-color: rgba() 在打印中会被强制转为不透明实色，甚至灰块。
必须显式清除：
@media print {
* {
background: none !important;
background-image: none !important;
color-adjust: exact;
-webkit-print-color-adjust: exact;
}
}另外，避免用 rem 或 em 控制打印内容宽度——不同浏览器对根字号解析不一致，可能导致横向溢出。推荐用 px 或 %，例如 max-width: 800px。
表格跨页断裂也是高频问题：如果打印区域含长表格，记得加 table { break-inside: avoid; }，否则可能某行被硬生生切在两页之间。
