如何用window.print实现两个按钮分别打印指定区块？

这个需求其实很常见，核心思路就是在点击按钮时给目标打印区块标记一个特殊标识，然后利用@media print样式只渲染这个标记的区块，我给你一套完整的实现方案，亲测好用：

1. 基础HTML结构 #

先把按钮和需要打印的区块对应好，给打印区块统一加个通用类方便样式控制：

<button id="Print1">打印区块1</button>
<button id="Print2">打印区块2</button>

<!-- 需要打印的区块 -->
<div id="print1" class="print-section">
  <h3>这是区块1的内容</h3>
  <p>这里是区块1的具体打印内容...</p>
</div>
<div id="print2" class="print-section">
  <h3>这是区块2的内容</h3>
  <p>这里是区块2的具体打印内容...</p>
</div>

2. 打印样式配置 #

利用@media print媒体查询，默认隐藏页面所有元素，只显示被标记为打印目标的区块：

/* 平时的页面样式，按需自定义 */
.print-section {
  margin: 20px 0;
  padding: 15px;
  border: 1px solid #eee;
}

/* 打印专属样式 */
@media print {
  /* 默认隐藏页面所有元素 */
  body * {
    visibility: hidden;
  }
  /* 显示打印目标区块及其内部所有元素 */
  .print-target, .print-target * {
    visibility: visible;
  }
  /* 将目标区块定位到页面顶部，避免打印出现多余空白 */
  .print-target {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    box-sizing: border-box;
  }
  /* 可选：隐藏打印页面的页眉页脚（部分浏览器支持） */
  @page {
    margin: 0;
  }
}

3. 点击事件逻辑 #

通过JavaScript给按钮绑定点击事件，动态给目标区块添加/移除打印标记类，然后触发打印：

// 获取页面元素
const printBtn1 = document.getElementById('Print1');
const printBtn2 = document.getElementById('Print2');
const printBlock1 = document.getElementById('print1');
const printBlock2 = document.getElementById('print2');

// 按钮1的打印逻辑
printBtn1.addEventListener('click', () => {
  // 给目标区块添加打印标记类
  printBlock1.classList.add('print-target');
  // 触发浏览器打印功能
  window.print();
  // 打印完成（不管用户是否确认打印）后移除标记类，避免影响后续操作
  printBlock1.classList.remove('print-target');
});

// 按钮2的打印逻辑
printBtn2.addEventListener('click', () => {
  printBlock2.classList.add('print-target');
  window.print();
  printBlock2.classList.remove('print-target');
});

关键细节说明 #

• 为什么用visibility: hidden而不是display: none？
  因为display: none会让元素彻底脱离文档流，子元素无法单独显示；而visibility: hidden只是隐藏元素，但可以通过给子元素设置visibility: visible来恢复显示，刚好符合我们只显示目标区块内部内容的需求。
• 打印后移除标记类很重要：如果不移除，下次页面刷新前，该区块会一直处于“打印目标”状态，可能影响正常显示或者后续打印操作。

内容的提问来源于stack exchange，提问作者dumb11