推荐用addEventListener绑定window.print()并确保DOM就绪，配合@media print隐藏非打印元素；注意iOS Safari不支持该API，需降级提示或后端生成PDF。
点击按钮触发 window.print() 就行，但别直接写在 HTML 里
直接在 <button onclick="window.print()"> 里调用看似简单，实际容易出问题：比如按钮自己也会被打印出来、页面还没加载完就触发、某些浏览器拦截弹窗式打印对话框。推荐用 JS 绑定事件，确保 DOM 就绪后再监听。
常见错误现象：Uncaught TypeError: window.print is not a function —— 极少见，但如果页面里定义了同名变量（比如 const print = 'xxx'），会覆盖原生方法。
- 用
addEventListener绑定，避免内联 JS - 确保脚本在
</body>前执行，或监听DOMContentLoaded - 按钮本身加
type="button"，防止表单意外提交
打印前隐藏不想出现的元素，用 @media print 最稳妥
用户点打印时，导航栏、侧边栏、按钮自己这些 UI 控件通常不该出现在纸质版里。用 CSS 的 @media print 规则控制最可靠，比 JS 动态增删 class 更轻量、更易维护。
使用场景：后台管理页、数据报表页、合同预览页 —— 这些页面结构固定，适合提前写好打印样式。
立即学习“前端免费学习笔记（深入）”；
示例：
@media print {
.no-print, .no-print * {
display: none !important;
}
body * {
visibility: hidden;
}
.print-content, .print-content * {
visibility: visible;
}
.print-content {
position: absolute;
left: 0;
top: 0;
}
}-
.no-print类加在按钮、导航等容器上即可 - 不要只依赖
display: none，有些浏览器对visibility: hidden处理更一致 - 避免用
!important过度，但打印样式里它确实常有必要
window.print() 没回调、不返回 Promise，没法判断用户是否点了“取消”或“打印完成”
这是最容易被忽略的限制：window.print() 是同步调用，但行为是异步弹窗，且浏览器不提供任何事件通知用户操作结果。你无法知道用户按了“打印”还是“取消”，也无法监听打印结束。
性能 / 兼容性影响：所有现代浏览器都支持，包括 iOS Safari 和 Android Chrome；但 Electron 或某些 WebView 环境可能需额外配置（如启用 webPreferences.printDialog = true）。
- 别写
if (window.print()) { ... }—— 它永远返回undefined - 不要试图轮询
window.matchMedia('print')来监听状态，兼容性差且不可靠 - 如需“打印完成”反馈，只能靠用户主动点击后续按钮，或服务端日志间接推断
移动端 Safari 打印支持弱，得提前降级提示
iOS Safari 不支持 window.print()（调用后静默失败，无报错），Android Chrome 支持但默认不显示系统打印界面，需用户手动点地址栏右上角“更多 → 打印”。这意味着你不能假设所有设备都能顺利唤起打印对话框。
可给出简短检测逻辑：
if (typeof window.print === 'function' && !/iPhone|iPad|iPod/.test(navigator.userAgent)) {
button.addEventListener('click', () => window.print());
} else {
button.textContent = '请长按页面内容 → 选择“分享” → “打印”';
button.disabled = true;
}- 别只用
userAgent判断，但目前没更可靠的 JS API - 微信内置浏览器、QQ 浏览器等 WebView 也大概率不支持，统一按 iOS 处理较稳妥
- 如果业务强依赖打印，建议后端生成 PDF 下载，而非前端 print
打印功能看着简单，真正落地时，@media print 样式适配、移动端兜底、以及“无法监听打印结果”这三点，最容易在线上暴露问题。
