如何用 window.print() 实现网页局部内容的调用打印机功能

作者：袖梨 2026-08-07

如何用 window.print() 实现网页局部内容的调用打印机功能需要先看清适用场景和关键步骤，避免只记结论却忽略实际限制。

核心思路是用@media print配合visibility隐藏非目标区域并显式显示.print-section，避免display:none导致子元素无法恢复，兼顾固定定位元素处理与框架动态性。

window.print() 默认会打印整个页面，想只打印局部内容，核心思路是：临时隐藏不需要打印的区域，再触发打印。这不是 window.print() 本身的功能限制，而是靠 CSS 控制打印样式实现的。

用 @media print 隐藏非目标区域

这是最稳定、兼容性最好的方式。浏览器在调用 window.print() 时会自动启用 @media print 规则，此时可把无关元素设为 display: none，只保留要打印的容器。

给要打印的区域加一个明确的 class，比如 print-section

在 CSS 中写：

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

注意：用 visibility: hidden 而不是 display: none，因为后者会导致子元素无法通过 visibility: visible 恢复显示
如果页面有固定定位（position: fixed）的导航栏或弹窗，它们可能仍会出现在打印页中，需额外加规则如 .header, .modal { display: none !important; }

调用前动态切换样式类（适合单页应用）

在 Vue/React 等框架中，DOM 可能被频繁重绘，硬编码的 @media print 规则有时不够灵活。此时可在调用 window.print() 前，临时给 <body> 加一个打印专用 class，再用 CSS 配合控制显隐。

定义 CSS：

@media print {  body:not(.print-mode) * {    visibility: hidden;  }  body.print-mode .print-section,   body.print-mode .print-section * {    visibility: visible;  }  body.print-mode .print-section {    position: absolute;    top: 0;    left: 0;  }}

JS 调用逻辑：

function triggerPrint() {  document.body.classList.add('print-mode');  window.print();  document.body.classList.remove('print-mode');}

注意：部分浏览器（如 Safari）在 window.print() 后不会立即执行后续 JS，所以 remove 可能失效；稳妥做法是加 setTimeout 延迟移除，或监听 afterprint 事件（但该事件兼容性较差）

避免 innerHTML + iframe 方案

网上有些方案建议把局部 HTML 提取出来，写入新 <iframe> 再调用其 contentWindow.print()。这种做法问题明显：

丢失原始页面的 CSS 样式链（尤其是 scoped style、CSS-in-JS），打印效果常严重错乱
无法继承当前页面的字体、变量、@font-face 等资源，需手动注入，维护成本高
iframe 打印在 iOS Safari 上存在白屏、卡死等已知 bug
对含图表（如 ECharts）、Canvas、Web Components 的区域支持极差

常见错误与调试技巧

打印预览里内容缺失或错位，多数不是 JS 问题，而是 CSS 在 @media print 下未生效或冲突。

Chrome DevTools 中打开打印预览（Ctrl+P / Cmd+P），然后勾选「渲染打印样式」，才能看到实际生效的打印 CSS
检查是否误用了 display: none 导致子元素不可见——必须用 visibility 配合层级恢复
表格（<table>）在打印时容易被截断，可加 page-break-inside: avoid 到 <tr> 或 <tbody>
背景图默认不打印（用户浏览器设置决定），如需强制打印，得加 -webkit-print-color-adjust: exact，但仅限 Chrome/Edge