打印触发时页面运行环境切换导致 window 状态依赖逻辑错位，需通过 data-printing 标志隔离上下文、强制重绘、禁用非必要观察器，并在 @media print 中重置样式及移除 fixed 定位。
这个问题本质是打印触发时，页面运行环境发生切换，而部分依赖 window 对象状态（如 window.innerWidth、window.matchMedia 监听、滚动位置、焦点元素等）的逻辑未同步响应，造成行为错位或判定失效。
识别是否为媒体查询切换引发的 window 事件断层
打印启动（window.print()）会强制浏览器进入 @media print 上下文，此时：
-
window.matchMedia("(max-width: 768px)").matches可能仍返回true，但实际布局已按 A4 尺寸重排，导致响应式 JS 逻辑误判 - 监听
resize的组件（如图表、网格容器）不会在打印预览中再次触发，原有尺寸缓存未更新 - 基于
document.elementFromPoint或getBoundingClientRect()的定位计算，在打印缩放/分页后坐标失真 - 某些 UI 库（如 Ant Design 的 Popover、Tooltip）依赖
window.scrollY定位，但打印中滚动状态归零，导致浮层渲染异常或消失
关键修复策略：隔离打印上下文，避免 window 状态污染
不依赖实时 window 值做核心判定，改用静态、可预测的信号替代：
- 用
document.body.classList.contains("print-mode")或document.documentElement.hasAttribute("data-printing")代替matchMedia判断当前是否处于打印流程 - 在调用
window.print()前，主动设置标志并冻结相关逻辑：document.documentElement.setAttribute("data-printing", "true");<br>chartInstance.resize(); // 强制重绘为打印适配尺寸 - 对需要响应式调整的组件，监听
beforeprint和afterprint事件（注意：Firefox 不支持afterprint，需 fallback 到setTimeout或 MutationObserver） - 禁用或暂停所有非必要定时器、IntersectionObserver、ResizeObserver —— 它们在打印进程中可能卡死或误触发
处理动态内容与第三方库兼容性
很多 UI 组件在 @media print 下会隐藏自身，但其 JS 仍保留在内存中运行。常见表现是弹窗残留、图表 canvas 渲染空白、富文本编辑器样式错乱：
- 在
@media printCSS 中显式重置关键属性：.ant-popover, .ql-toolbar { display: none !important; }<br>.echarts-for-react canvas { width: 100% !important; height: auto !important; } - 对使用
position: fixed实现的悬浮控件，打印前用 JS 移除其固定定位：document.querySelectorAll("[style*='position: fixed']").forEach(el => el.style.position = "static"); - 若使用 Web Components 或 Shadow DOM，确保
@media print规则写在组件内部样式中，外部无法穿透覆盖
验证与调试建议
仅靠开发者工具的“打印模拟”不可靠，必须实测真实打印预览：
- 在 Chrome 中打开打印预览（Ctrl+P），勾选「背景图形」，并检查 Network 面板确认
print.css加载状态（Status 应为 200，非 304） - 在控制台执行
matchMedia("print").matches，确认返回true；再执行getComputedStyle(document.body).display，验证是否为block（非none） - 临时插入调试语句：
window.addEventListener("beforeprint", () => console.log("beforeprint fired"));
观察控制台是否输出，确认事件是否被正确捕获
