最稳妥做法是用@media print配合visibility控制显隐，兼容IE需JS克隆目标div并临时替换body内容，打印后移除；慎用position:fixed和transform，优先用page-break-inside:avoid控制分页。

用 window.print() 打印前先隐藏非目标区域

浏览器原生打印默认输出整个页面，想只打某个

，核心不是“选中它”，而是“让其他内容在打印时不可见”。最稳妥的做法是用 CSS 媒体查询 + 类控制显隐。

常见错误是直接对目标 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（虽然已被标记为废弃，但所有主流浏览器仍支持）。

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

• 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 虚拟打印机都输出一致的内容——哪怕只是多一行空白，也可能导致客户拒收报表。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！