点击按钮直接调用window.print()即可触发浏览器原生打印预览窗口，无需额外库或后端配合；它同步阻塞执行、拉起系统级对话框，但须确保用户直接交互触发，避免异步调用，并用@media print隐藏非打印内容。
点击按钮直接调用 window.print()
浏览器原生打印预览窗口不需要额外库或后端配合，window.print() 就是唯一需要调用的函数。它会立即暂停当前页面渲染、拉起系统级打印对话框（含预览），用户可选择打印机、页边距、是否背景图等——这正是你想要的“自带预览窗口”。
常见错误是把 window.print() 写在异步回调里（比如 setTimeout 或 Promise resolve 后），某些浏览器（尤其是 Chrome 115+）会因安全策略静默拦截，导致点击无反应。务必确保它是用户**直接交互触发的同步调用**。
- 按钮必须是
<button></button>或带role="button"的元素，不能仅靠onclick绑定在<div> 上（部分屏幕阅读器或移动端可能不识别）<li>避免在 <code>fetch().then(() => window.print())这类链式异步中调用 - 不要加
event.preventDefault()（除非你同时阻止了表单提交等副作用），它不影响print()，但可能干扰调试判断
打印前隐藏不需要的内容（用 CSS @media print）
默认情况下，window.print() 会把整个页面 DOM 打印出来，导航栏、广告位、按钮自己都会出现在纸面上。用 @media print 是最轻量、兼容性最好的隐藏方式，无需 JS 操作 DOM 显示/隐藏状态。
注意：CSS 中的 display: none 在打印媒体中生效，但 visibility: hidden 不会隐藏内容（只隐藏视觉，仍占位、可打印）；opacity: 0 同样无效。
@media print {
.header, .sidebar, .print-hide {
display: none !important;
}
/* 确保打印时链接显示 URL */
a[href]::after {
content: " (" attr(href) ")";
}
}
Chrome/Firefox/Safari 对 window.print() 的行为差异
三者都支持 window.print()，但细节不同：
- Chrome 和 Edge 默认打开“简化打印预览”，用户需手动点“更多设置”才能看到完整选项（如页眉页脚、背景图形）。这是 UI 层限制，JS 无法绕过
- Firefox 仍保留传统打印对话框，选项更全，且支持通过
about:config开启“打印时始终显示背景图形”（print.print_background） - Safari 在 macOS 上会跳转到系统“通用打印”面板，不提供“预览”标签页，但实时渲染效果与最终输出一致
- 所有浏览器都不允许 JS 自动关闭打印窗口或监听“用户点了取消”——这是故意设计的安全隔离
为什么不用 iframe + contentWindow.print()？
有人尝试用隐藏 iframe 加载精简版 HTML 再调用其 contentWindow.print()，想避开主页面样式干扰。这在技术上可行，但实际踩坑多：
- iFrame 必须已加载完成（
iframe.onload），否则contentWindow可能为 null - CORS 限制：如果 iframe src 是跨域地址，
contentWindow.print()会抛DOMException - 移动端 Safari 对 iframe 打印支持不稳定，常白屏或无响应
- 增加页面复杂度，而纯 CSS
@media print已覆盖 95% 的需求
除非你要打印完全独立的数据报表（且必须脱离当前页面上下文），否则没必要引入 iframe 方案。
真正容易被忽略的是：打印样式表必须放在主文档内，不能放在外部 CSS 文件的 @import 链里（部分旧版 IE 会失效）；另外，动态插入的 DOM 元素（比如 Vue/React 渲染后的内容）只要存在于当前 document，@media print 规则依然有效——前提是规则本身没被 JS 覆盖或移除。
