window.print()可一键唤起浏览器原生打印对话框，但必须由用户点击等同步交互触发，异步调用（如fetch.then）会被静默拦截；需配合@media print隐藏非打印元素，并注意移动端兼容性及打印样式适配。
点击按钮直接触发浏览器打印对话框
浏览器原生支持一键唤起打印界面，不需要后端或额外插件。核心就是调用 window.print()，它会立即弹出系统级打印对话框（Chrome/Firefox/Edge 都一致）。但要注意：这个操作必须由用户主动触发（比如鼠标点击），不能由定时器或 AJAX 回调自动调用，否则会被浏览器静默拦截。
常见错误是把 print() 写在异步逻辑里，比如 fetch().then(() => window.print()) —— 这大概率失效。正确做法是绑定到按钮的 onclick 或 addEventListener('click', ...)。
- HTML 按钮写法：
<button onclick="window.print()">打印本页</button> - 更推荐 JS 绑定：
document.getElementById('printBtn').addEventListener('click', () => window.print()); - 别在
setTimeout或Promise.then里调用window.print()，除非确保上下文仍是用户手势触发链
打印前隐藏不需要的内容（导航栏、按钮本身）
默认 window.print() 会打印整个页面，但你通常不希望打印“打印按钮”或侧边栏。最可靠的方式是用 @media print CSS 规则控制显示状态。
关键点：不要只靠 display: none，某些浏览器（尤其是旧版 Edge）对打印时的 DOM 渲染有缓存行为；建议搭配 visibility: hidden 或 opacity: 0 + position: absolute 更稳妥。
立即学习“前端免费学习笔记（深入）”；
- 给要隐藏的元素加 class：
<div class="no-print">这个不打印</div> - 对应 CSS：
@media print { .no-print { display: none !important; } } - 务必加
!important，否则容易被其他样式覆盖 - 按钮自己也要隐藏，否则用户可能反复点——在按钮上也加
no-print类
打印区域限定：只打印某一块 div
window.print() 本身无法指定范围，但可以通过临时 DOM 操作实现“局部打印”。原理是：克隆目标元素 → 创建新窗口 → 写入 HTML → 调用 print() → 关闭窗口。
这个方法兼容性好，但要注意新窗口可能被弹窗拦截（尤其 Safari），且打印完成后需手动清理，否则残留空白页。
- 示例代码：
function printSection(id) { const el = document.getElementById(id); const w = window.open('', '_blank'); w.document.write(el.outerHTML); w.document.close(); w.focus(); w.print(); w.close(); } - 必须调用
w.document.close()，否则print()可能卡住或空白 - 如果目标元素含相对路径图片或外部 CSS，新窗口里会丢失样式——建议把关键样式内联到
<style>中一起写入 - 移动端 Safari 对
window.open限制极严，此方案在 iOS 上基本不可用
打印样式调试：为什么预览里布局错乱？
打印预览和屏幕渲染差异大，常见问题是 flex 布局塌陷、百分比宽度失效、背景色默认不打印（即使设置了 background: #fff）。
根本原因：浏览器打印引擎使用简化渲染路径，很多 CSS 属性被忽略或降级处理。调试时别依赖开发者工具的“打印预览”面板，它只是模拟，真实效果以系统打印对话框里的“预览”为准。
- 强制打印背景色：
@media print { * { -webkit-print-color-adjust: exact; color-adjust: exact; } } - 避免用
flex布局做打印区域，改用display: block+float或纯table - 字体大小建议用
pt（如12pt）而非px或rem，更贴近物理尺寸 - 测试时务必用真实打印机或“另存为 PDF”，不要只看浏览器内置预览
真正麻烦的是跨浏览器一致性——Chrome 的打印引擎和 Firefox 完全不同，同一份 CSS 在两者预览中可能呈现完全不同的分页位置。没有银弹，只能反复打样调整 page-break-inside: avoid 和 break-after 等属性。
