window.print() 必须在用户同步交互中调用，否则会被浏览器静默忽略；常见失效原因包括触发时机不当、上下文错误、iframe未加载完成、移动端不支持及dom未稳定。
window.print() 能直接唤起打印对话框，但必须在用户点击等同步交互中调用，否则多数浏览器会静默忽略。
为什么 window.print() 有时点不动、没反应
不是代码写错，而是触发时机或上下文不合法：
-
window.print写成window.print（漏括号）——函数不执行，控制台也无报错 - 放在
setTimeout、fetch.then或 Vue 的await后调用——浏览器判定为“非用户直接触发”，尤其 Safari 和旧版 Edge 会直接丢弃 - 按钮是用
<a href="javascript:print()"></a>写的——既用了错误函数名print()，又因跳转干扰了事件流 - 在 iframe 中调用时写成
parent.print()或self.print()——应明确指向iframe.contentWindow.print()，且需确保 iframe 已加载完成
@media print 是隐藏导航栏、按钮的唯一可靠方式
JS 动态增删 class 或修改 style.display 在 window.print() 触发瞬间往往来不及生效，而 @media print 是声明式、同步渲染的：
- 给不需要打印的元素加 class，例如
<header class="no-print"></header> - 在样式表中写：
@media print { .no-print { display: none !important; } } - 避免用
visibility: hidden或opacity: 0——它们仍占布局空间，可能导致分页错乱或空白页 - Chrome 默认不打印背景色和
background-image，即使 CSS 里写了，用户也得手动在打印设置里勾选“背景图形”才生效
单页应用（SPA）里打印内容为空或过时的解决办法
React/Vue 页面切换路由不刷新 DOM，window.print() 抓取的是当前 DOM 快照。若组件尚未完成渲染（比如异步数据未返回、过渡动画未结束），就会打出空内容：
- Vue 中应在
nextTick后调用：this.$nextTick(() => window.print())
- React 中可在
useEffect或setState的 callback 里延迟触发 - 调试时可先在控制台手动执行
window.print()，看是否与预期一致；不一致就说明 DOM 还没稳定 - 避免在 print 前批量修改样式（如循环设
el.style.display = 'none'），可能引发 layout thrashing，截取到中间态
移动端和 iframe 打印要格外小心
iOS Safari 和 Android Chrome 移动版均不支持 window.print()，调用后无任何提示，也不报错：
- 可用简单 UA 检测绕过：
if (typeof window.print === 'function' && !/iPhone|iPad|iPod|Android/.test(navigator.userAgent)) { window.print(); } - iframe 方案虽可控，但必须确保 iframe 加载完成再调用：
iframe.addEventListener('load', () => iframe.contentWindow.print()); - 新窗口方案（
window.open+document.write）能隔离样式，但要注意：document.close()必须紧跟write后执行，否则print()可能截取空页；且 Chrome 89+ 会阻止非用户手势触发的window.close()
真正难的不是调用 window.print()，而是确保它执行那一刻，DOM 是你想要的样子——内容已加载、样式已就位、干扰元素已被 CSS 隔离。很多问题表面是“没弹窗”，实际是“弹得太早”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
