在index.html中实现局部打印功能：HTML打印控制技巧-html教程-PHP中文网

window.print()本身不支持局部打印，必须依赖css媒体查询或dom临时替换实现；前者更稳定无闪动，后者简单但有风险。

在index.html中实现局部打印功能：html打印控制技巧

window.print() 本身不支持局部打印，必须靠 CSS 媒体查询或 DOM 临时替换实现；前者更稳定、无闪动，后者简单但有风险。

用 `@media print` 隐藏非目标区域（推荐）

这是最干净、兼容性最好的方式：不修改 DOM，不触发重排，也不影响用户交互。核心是让“不该打的不可见”，而不是“删掉它们”。

给要打印的容器加唯一标识，比如 id="print-section" 或 class="print-target"

在 <style></style> 或外部 CSS 中写：

@media print {
  body * {
    visibility: hidden;
  }
  #print-section,
  #print-section * {
    visibility: visible;
  }
  #print-section {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
  }
}

必须用 visibility: hidden 而非 display: none——否则目标区域可能因父容器塌陷而错位
加 position: absolute 是为了防止其他隐藏元素仍占空白高度，影响分页

用 `innerHTML` 替换 body 实现局部打印（慎用）

适合简单页面或快速验证，但在 Vue/React/含复杂 JS 的页面中极易出问题：事件监听丢失、组件状态断裂、样式重置失败。

DOM操作与实战案例课件以及源码

DOM操作与实战案例

下载

典型写法：

function printSection() {
  const original = document.body.innerHTML;
  const target = document.getElementById('print-section').innerHTML;
  document.body.innerHTML = target;
  window.print();
  document.body.innerHTML = original;
}

执行后页面会瞬间白屏或布局跳变，用户可能误操作
如果原页面用了 document.write、eval、或依赖 body 存在的第三方脚本（如统计 SDK），会直接报错或失效
无法保留内联 style 或动态插入的 <link>，打印样式常丢失

为什么 `window.print()` 有时报 “Document is not focused”

Chrome/Edge 在非活跃 tab 或 iframe 中调用时会拒绝打印，这不是 bug，而是安全限制。

常见触发场景：从弹窗按钮调用、定时器自动触发、iframe 内执行
低成本修复：在 window.print() 前加 window.focus()，哪怕当前已是焦点页 —— 多数浏览器忽略冗余 focus，但能绕过部分环境的检测
不要依赖 beforeprint 或 afterprint 做关键逻辑：Firefox 不支持 afterprint，且事件触发时机不可靠（比如用户取消打印，事件仍可能触发）