真正可靠的做法是用@media print组合visibility: hidden、position: absolute和left: -9999px隐藏iframe及其容器，避免display: none残留空白，并需兼顾同域iframe内部内容的打印隐藏。
要在打印时隐藏 iframe 内容，不能靠删掉或 JavaScript 移除它——那样会破坏页面结构、丢失状态，还可能触发错误。真正可靠的做法，是用 @media print 把 iframe 及其容器“视觉上抹掉”，同时防止它占位或留白。
用 visibility + position 彻底隐藏 iframe
仅写 display: none 在某些浏览器（尤其是旧版 Edge 或 Chrome 的打印渲染层）中，iframe 仍可能留下空白高度或边框残留。推荐组合写法：
-
给 iframe 本身加：
visibility: hidden; position: absolute; left: -9999px; - 同时隐藏其父容器（如有外层 div/wrapper），避免 padding/margin 残留影响分页
- 不要只依赖
display: none，尤其当 iframe 是position: fixed或嵌套在 flex/grid 容器里时
匹配 iframe 的多种写法（兼顾内联与 class 控制）
实际项目中 iframe 可能没有 ID，或由框架动态插入。建议在打印样式中覆盖常见情况：
- 隐藏所有 iframe：
@media print { iframe { visibility: hidden; position: absolute; left: -9999px; } } - 按 class 精准控制：
@media print { .no-print-iframe, .embed-frame { visibility: hidden; position: absolute; left: -9999px; } } - 处理内联 style 边界情况（比如第三方 SDK 注入的 iframe）：
@media print { iframe[style] { all: unset !important; visibility: hidden !important; } }
注意 iframe 内容是否也需同步隐藏
上面方法只隐藏 iframe 元素本身。如果 iframe 加载的是同域页面，且你希望它内部内容也不打印，需额外干预：
- 无法直接用父页 CSS 控制 iframe 内部 DOM，除非 iframe 页面自己也定义了
@media print - 可行做法：在 iframe 的 src 页面中，同样加入打印隐藏规则，例如：
@media print { body { display: none !important; } } - 若 iframe 是跨域，浏览器策略禁止访问其 DOM，此时只能靠父页隐藏 iframe 容器——这是唯一可控方式
别踩这些坑
几个真实项目中高频翻车点：
- 写了
display: none却没加!important，被 iframe 自带的内联样式或框架默认样式覆盖 - 用
opacity: 0或height: 0，打印时仍占位，甚至导致分页错乱 - 在
@media screen里提前隐藏了 iframe，结果页面一加载就看不见——记住：打印样式必须严格限定在@media print块内 - iframe 高度设为
100%但父容器无明确高度，打印时布局塌陷，引发不可预测的空白
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
