直接调用 window.print() 可唤起浏览器打印对话框，需用语义化 button 绑定事件而非 a 标签；隐藏非内容元素须依赖 @media print CSS（display: none !important）；iframe 方案可隔离打印区域，需确保加载完成后再调用 print()。
点击按钮触发浏览器打印对话框
直接调用 window.print() 就能唤起打印界面，不需要额外库或服务端配合。它只控制当前页面（或 iframe）的打印行为，不负责排版、分页或样式适配——这些全靠 CSS 控制。
常见错误是把按钮写成 <a href="javascript:window.print()">打印</a>，看似能用，但会破坏语义、影响可访问性，且在某些安全策略下被拦截。正确做法是绑定事件：
<button onclick="window.print()">打印本页</button>
- 推荐用
<button></button>而非<a></a>，语义清晰，无障碍支持好 - 避免内联
javascript:伪协议，防止 CSP 策略拒绝执行 - 如果按钮在弹窗或 iframe 中，
window.print()打印的是该上下文对应的内容，不是父页面
打印时隐藏非内容元素（导航、广告、按钮本身）
用户点打印，真正在意的是正文，不是页头、侧边栏、操作按钮甚至这个“打印”按钮——它们得消失。纯靠 JS 移除 DOM 不可靠（可能漏掉、影响回退），必须用 @media print CSS 控制显示逻辑。
关键不是“删”，而是“不渲染”：
立即学习“前端免费学习笔记（深入）”；
@media print {
.header, .sidebar, .print-btn { display: none !important; }
body * { visibility: visible; }
body { font-size: 12pt; line-height: 1.4; }
}-
display: none是最稳妥的隐藏方式，visibility: hidden仍占布局空间，可能影响分页 - 务必加
!important，否则页面原有样式可能覆盖 print 规则 - 不要依赖 JS 动态增删 class 来切换打印样式，CSS 媒体查询更稳定、无竞态
Chrome/Firefox/Safari 对 print 样式支持差异
三大浏览器对 @media print 的解析基本一致，但有两个实际痛点：
-
background-color和background-image默认不打印（即使设了-webkit-print-color-adjust: exact），用户需手动勾选“背景图形”选项，无法强制 - Safari 在打印预览中不触发
beforeprint/afterprint事件，Chrome 和 Firefox 支持，别拿它做状态切换依据 - Firefox 对
position: fixed元素的打印处理不稳定，建议打印专用区域用普通流布局
iframe 打印特定区域（避免整页打印）
想只打文章正文，又不想污染主页面样式？用 <iframe></iframe> 隔离是最轻量可靠的方案。原理是：把目标 HTML 片段写入隐藏 iframe，再对它的 window 调用 print()。
注意不是 iframe.contentWindow.print() 就完事——得等 iframe 加载完成：
const iframe = document.createElement('iframe');
iframe.style.display = 'none';
document.body.appendChild(iframe);
const doc = iframe.contentDocument || iframe.contentWindow.document;
doc.open();
doc.write('<html><body>' + contentHTML + '</body></html>');
doc.close();
iframe.contentWindow.focus();
iframe.contentWindow.print();- 必须调用
doc.close()，否则print()可能卡住或空白 - 写入内容前不要设
src，否则跨域或加载失败会导致contentDocument为 null - 打印后 iframe 可留可删，但别在
print()后立刻remove()，部分浏览器还没开始渲染
打印按钮本身不是难点，难的是让打印结果和用户预期一致——这取决于你有没有提前想清楚：要打什么、不该打什么、不同浏览器怎么妥协、要不要隔离内容。样式、事件、iframe 三者经常混用，但各自边界得划清。
