直接调用window.print()即可触发浏览器打印对话框，需配合@media print隐藏非打印元素（如按钮）、避免异步调用，并注意移动端Safari兼容性差。
点击按钮触发浏览器打印对话框
直接调用 window.print() 是最轻量、兼容性最好的方式，它不依赖任何库，所有现代浏览器（包括 IE9+）都支持。这个函数会立即弹出系统级打印预览窗口，用户可选择打印机、页边距、是否打印背景色等。
常见错误是把它写成 onclick="print()" —— 这会尝试调用全局 print 函数（在某些环境如 Node.js 模拟中可能不存在），而正确写法必须是 onclick="window.print()" 或绑定到 JS 事件监听器里。
- 按钮 HTML 示例：
<button onclick="window.print()">打印本页</button>
- 如果用 JS 绑定，推荐写成：
document.getElementById('print-btn').addEventListener('click', () => window.print()); - 注意：移动端 Safari 对
window.print()支持有限，部分 iOS 版本会静默忽略，需提前测试
打印前隐藏不需要的内容（如按钮本身）
默认情况下，window.print() 会打印整个页面，包括“打印”按钮、导航栏、广告位等干扰元素。最可靠的方式是用 @media print CSS 规则控制显示逻辑。
关键点在于：不能靠 JS 在点击时临时移除 DOM 元素再恢复——这容易因异步或打印延迟导致状态错乱；CSS 方案无副作用、可预测性强。
立即学习“前端免费学习笔记（深入）”；
- 给要隐藏的元素加 class，例如：
<button class="no-print">打印本页</button>
- 在样式表中添加：
@media print { .no-print { display: none !important; } } - 若需打印特定区域（比如只打表格），可配合
@media print设置其他区域为display: none，仅保留#print-area { display: block; }
调整打印样式：字体、颜色、分页控制
浏览器默认会禁用背景色和图片（除非用户手动勾选“打印背景图形”），所以靠 CSS 控制打印效果必须显式声明 color、background-color，并用 !important 提高优先级。
分页问题最常出现在表格跨页或卡片被截断。CSS 的 page-break-inside: avoid 和 break-inside: avoid 是主要手段，但支持度有差异：旧版 IE 只认前者，现代浏览器两者都支持。
- 强制分页示例：
@media print { h2 { break-before: page; } } - 防止表格行被拆开：
@media print table tr { break-inside: avoid; } - 确保黑字在白底上清晰可读：
@media print * { color: #000 !important; background: #fff !important; }
打印后自动恢复焦点或滚动位置
用户点完打印按钮后，浏览器可能将焦点移到地址栏，或在打印对话框关闭后把页面滚回顶部——这会影响后续操作体验，尤其在单页应用中。
目前没有标准 API 能监听“打印结束”，但可以利用 beforeprint 和 afterprint 事件做有限干预。注意：这两个事件不是所有浏览器都支持（Safari 完全不支持 afterprint），所以只能作为增强，不能作为核心逻辑依赖。
- 保存当前滚动位置：
let scrollY = 0; window.addEventListener('beforeprint', () => { scrollY = window.scrollY; }); - 尝试恢复（仅限支持
afterprint的浏览器）：window.addEventListener('afterprint', () => { window.scrollTo(0, scrollY); }); - 更稳妥的做法是：避免让用户在长页面中反复打印，把可打印内容抽成独立视图或弹窗，从根本上规避滚动问题
实际部署时最容易被忽略的是移动端兼容性和打印样式隔离——很多人只在桌面 Chrome 测试，结果在 iPad 上按钮不响应，或打印出来全是灰色文字。多端真机验证比写一堆 fallback 更有效。
