window.print() 是不可定制的系统级打印触发器，仅在用户交互中有效，无法控制打印样式、跨 iframe 打印需聚焦，spa 中须确保 dom 渲染完成，移动端不支持。
调用 window.print() 会直接弹出系统打印对话框
它不接受参数，也不返回值，执行后浏览器立即暂停当前页面渲染、拉起原生打印预览界面。这不是一个可定制的 API，只是触发系统级打印流程的开关。
- 在任何用户交互事件（如
click）中调用才有效；Chrome 和 Edge 等现代浏览器禁止自动触发（比如在setTimeout或页面加载完成时直接调用），否则静默失败 - 不要指望它能控制页眉页脚、边距或纸张方向——这些全由用户在打印对话框里手动选，JS 无法干预
- 如果页面含 iframe，
window.print()默认只打印当前窗口/iframe 的内容；需主动切换window.focus()到目标 iframe 再调用
打印前建议用 @media print 隐藏干扰元素
用户看到的打印预览，是当前 DOM 的快照。导航栏、按钮、广告位、背景图等在纸上既无用又浪费墨水，必须提前隐藏。
- 给不需要打印的区域加 class，例如
class="no-print"，再写样式：@media print { .no-print { display: none !important; } } - 避免用
visibility: hidden或opacity: 0，它们不阻止元素占位，可能造成空白页或错位 - 慎用
background-image：默认情况下，Chrome/Firefox 不打印背景（设置里要手动勾选“背景图形”），所以依赖背景图传达信息的页面，打印时会丢内容
window.print() 在单页应用（SPA）中容易漏掉动态内容
React/Vue/Angular 页面切换路由时通常不刷新 DOM，但 window.print() 只抓取当前 DOM 快照。如果打印触发时组件还没完成渲染（比如异步数据未返回、动画未结束），就会打出空内容或旧状态。
- 确保调用前数据已就绪：Vue 可用
nextTick，React 可在useEffect或setState的 callback 中延迟调用 - 避免在
print前做 heavy reflow（如批量修改 style），可能引发布局抖动，导致截取到中间态 - 调试时可在控制台手动执行
window.print()，观察是否和预期一致；不一致就说明 DOM 还没稳定
移动端调用 window.print() 基本无效
iOS Safari 和 Android Chrome 移动版均不支持 window.print()，调用后无反应，也不会报错。这不是 bug，是平台限制。
- 检测方式简单粗暴：
if (typeof window.print === 'function' && !/iPhone|iPad|iPod|Android/.test(navigator.userAgent)) { window.print(); } - 替代方案有限：生成 PDF（用
jsPDF+html2canvas）或引导用户“长按截图→分享→打印”，但体验割裂 - 别试图用
matchMedia('print')检测——它永远返回 false，因为移动浏览器根本不进入打印媒体查询上下文
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
