调用 window.print() 可触发浏览器原生打印对话框，需配合 @media print CSS 隐藏非关键元素、优化布局适配 A4 尺寸，并利用 onafterprint 增强交互体验。
直接调用 window.print() 就能触发浏览器原生打印对话框，但要获得干净、可控的打印效果，关键在于配合 CSS 媒体查询和页面结构优化。
基础用法：一行代码触发打印
在任意事件中（比如按钮点击）执行：
javascript
window.print();
这会立即唤起浏览器的打印预览界面（Chrome、Edge、Firefox、Safari 均支持），用户可选择打印机、页边距、是否背景图形等。注意：该操作是同步阻塞的，JavaScript 会暂停执行直到用户关闭打印窗口。
立即学习“Java免费学习笔记（深入）”；
打印前隐藏不需要的内容
导航栏、侧边栏、按钮、广告位等通常不该出现在打印页中。推荐用 CSS 的 @media print 隐藏：
css
@media print {
.header, .sidebar, .print-hide { display: none !important; }
body { font-size: 12pt; line-height: 1.4; }
}
给不想打印的元素添加 class="print-hide" 是常见做法。避免仅靠 JS 移除 DOM，因为 window.print() 触发时样式已计算，CSS 控制更可靠、更轻量。
确保关键内容适配打印布局
打印默认使用 A4 尺寸（约 210×297mm），网页常见的流式布局或 Flex/Grid 可能错乱。建议：
- 对打印区域（如文章正文）设置固定宽度（如
max-width: 210mm）并居中 - 避免使用
position: fixed/absolute定位的元素，它们在分页时易丢失 - 图片添加
max-width: 100%; height: auto;防止溢出纸张 - 用
page-break-inside: avoid;防止标题与正文被拆到不同页
补充技巧：打印后自动恢复或提示
由于 window.print() 没有回调函数，无法直接监听“打印完成”。但可通过以下方式增强体验：
- 点击打印按钮后，禁用按钮并显示“正在准备打印…”（文字提示比 loading 图标更兼容）
- 利用
window.onafterprint（Chrome、Edge、Firefox 支持，Safari 不支持）做收尾处理，例如重置按钮状态 - 若需高一致性，可动态生成仅含打印内容的 iframe，调用其
contentWindow.print()，打印完再移除 iframe
