最稳妥做法是用@media print配合visibility控制显隐，兼容IE需JS克隆目标div并临时替换body内容，打印后移除；慎用position:fixed和transform，优先用page-break-inside:avoid控制分页。
用 window.print() 打印前先隐藏非目标区域
浏览器原生打印默认输出整个页面，想只打某个 <div>，核心不是“选中它”，而是“让其他内容在打印时不可见”。最稳妥的做法是用 CSS 媒体查询 + 类控制显隐。<p>常见错误是直接对目标 <code>div 调用 print()，结果照样打出全部内容；或者用 display: none 粗暴隐藏兄弟元素，但忘了它会影响页面布局甚至触发重排。
- 给要打印的容器加一个唯一类名，比如
class="print-target" - 在样式表里写：
@media print { body * { visibility: hidden; } .print-target, .print-target * { visibility: visible; } .print-target { position: absolute; left: 0; top: 0; } } - 避免用
display: none，因为子元素无法通过display: block恢复——visibility可继承且可被子元素覆盖
IE 和旧版 Edge 不支持 @media print 中的 visibility: visible 继承
在 IE11 或旧 Edge 里，上面那段 CSS 可能导致 .print-target 内部文字也不显示。这不是 bug，是它们对 visibility 继承的实现差异。
兼容方案不是降级回 display，而是用 JS 临时改造 DOM 结构：
立即学习“前端免费学习笔记（深入）”；
- 打印前，把目标
div克隆一份，插入到末尾，并加上id="print-only" - 用
@media print隐藏除#print-only外的所有内容 - 调用
window.print()后，立刻移除#print-only - 注意：克隆时需手动复制内联样式、
data-属性，否则图表或动态内容可能丢失
matchMedia('print') 能监听打印开始/结束，但别依赖它做关键逻辑
这个 API 表面很实用，比如想在打印前自动展开折叠面板、打印后恢复状态。但它触发时机不稳定——Chrome 可能延迟几百毫秒，Safari 在某些 PDF 导出流程里根本不触发。
真正可靠的时机只有两个：用户点击“打印”按钮（JS 主动控制），以及 window.onafterprint（虽然已被标记为废弃，但所有主流浏览器仍支持）。
-
matchMedia('print').addEventListener('change', handler)仅建议用于 UI 微调（如临时禁用按钮） - 不要在里面执行异步操作（如
fetch），因为打印窗口一旦弹出，JS 执行可能被暂停 - 如果用了第三方打印库（如 jsPDF），优先走它的回调，而不是监听媒体查询
打印样式里慎用 position: fixed 和 transform
这两个属性在多数浏览器打印预览中表现异常：固定定位元素可能重复出现多次，transform: scale() 会丢失缩放效果，甚至导致内容截断。
如果你的目标 div 里有图表、表格或响应式卡片，它们很可能用了这类样式。打印前必须重置：
- 在
@media print中强制重写：.print-target * { position: static !important; transform: none !important; zoom: 1 !important; /* 防 IE 缩放失效 */ } - 特别注意第三方组件（如 ECharts、Ant Design 的 Table），它们内部常带
transform动画，得用更具体的选择器覆盖 - 打印 PDF 时，
page-break-inside: avoid比break-inside兼容性更好，但对 flex/grid 容器无效
实际最难的不是写出能打印的代码，是让不同设备、不同打印驱动、不同 PDF 虚拟打印机都输出一致的内容——哪怕只是多一行空白，也可能导致客户拒收报表。
