如何在JavaScript中打印指定元素（PDF/纸张打印）：电商收据需求

不用折腾隐藏再恢复页面元素，直接用CSS打印媒体查询就能完美解决，全程不修改DOM结构，页面显示和打印体验互不干扰。

核心思路 #

通过@media print规则，专门为打印场景定义样式：

• 隐藏页面中除收据外的所有内容
• 优化收据在打印时的排版（比如调整宽度、去除不必要的背景色以节省墨水）

完整代码实现 #

CSS 代码 #

/* 页面正常显示时的收据样式 */
.receipt {
  border-collapse: collapse;
  max-width: 80%;
  font-family: sans-serif;
}

.receipt td {
  padding: .5em;
}

.receipt tr:nth-child(even) {
  border: 1px solid #333;
  border-inline: none;
  background: #ddd;
}

.receipt tr:nth-child(odd) {
  background: #fff
}

.header-Uprice,
.item-Uprice,
.header-qty,
.item-qty {
  text-align: center
}

.total {
  border-bottom: 3px double #000
}

/* 打印专属样式 */
@media print {
  /* 隐藏所有非收据元素 */
  body > *:not(.receipt) {
    display: none !important;
  }

  /* 调整收据在打印时的样式 */
  .receipt {
    max-width: 100%;
    width: 100%;
  }

  /* 可选：去掉背景色，节省打印机墨水 */
  .receipt tr:nth-child(even) {
    background: transparent;
  }
}

HTML 代码（修正原结构错误） #

<table class="receipt">
  <tr class="table-headers">
    <td class="header-id">#</td>
    <td class="header-desc">Item Description</td>
    <td class="header-Uprice">Unit Price</td>
    <td class="header-qty">Qty</td>
    <td class="header-price">Price</td>
  </tr>
  <tr class="item" id="1">
    <td class="item-id">1</td>
    <td class="item-desc">Dummy Item1</td>
    <td class="item-Uprice">200$</td>
    <td class="item-qty">1</td>
    <td class="item-price">200$</td>
  </tr>
  <tr class="item" id="2">
    <td class="item-id">2</td>
    <td class="item-desc">Dummy Item2</td>
    <td class="item-Uprice">75$</td>
    <td class="item-qty">1</td>
    <td class="item-price">75$</td>
  </tr>
  <tr class="item" id="3">
    <td class="item-id">3</td>
    <td class="item-desc">Dummy Item3</td>
    <td class="item-Uprice">100$</td>
    <td class="item-qty">2</td>
    <td class="item-price">200$</td>
  </tr>
  <tr class="total">
    <td colspan="4">Total</td>
    <td>475$</td>
  </tr>
</table>

触发打印 #

在按钮点击事件里直接调用：

document.querySelector('#print-btn').addEventListener('click', () => {
  window.print();
});

点击打印按钮后，浏览器会直接加载打印样式，只显示收据内容，打印完成后页面完全不受影响，没有任何隐藏/恢复的闪烁问题。

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