前端局部打印：避免 DOM 隐藏/显示，优雅地打印指定 HTML 片段

<section class="receipt-section">
  <table class="receipt">
    <style>
      /* 收据专属样式 */
      .receipt {
        border-collapse: collapse;
        max-width: 80%;
        font-family: sans-serif;
        /* 初始状态不居中，等待JS动态注入 */
      }

      .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
      }
    </style>
    <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>Total</td>
      <td></td>
      <td></td>
      <td></td>
      <td>475$</td>
    </tr>
  </table>
</section>

function printReceipt() {
  // 1. 获取包含收据的整个区域的HTML内容
  const receiptSection = document.querySelector('.receipt-section');
  if (!receiptSection) {
    console.error('未找到收据区域元素 (.receipt-section)。');
    return;
  }
  let receiptHTML = receiptSection.innerHTML;

  // 2. 准备动态注入的CSS样式，用于打印前的居中显示
  // 注意：这里使用了转义字符来确保字符串正确解析
  const cssCenteringScript = `
    const styleTag = document.querySelector('.receipt > style');
    if (styleTag) {
      styleTag.innerHTML += '.receipt { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0; }';
    }
  `;

  // 3. 注入一个脚本到收据HTML中，使其在新页面加载后自动执行打印和居中样式
  // 这个脚本将在新窗口加载完成后立即运行
  const printScript = `<script>
    window.onload = () => {
      ${cssCenteringScript} // 注入居中样式
      window.print(); // 触发打印
      // 可选：打印后关闭当前窗口，但需注意浏览器安全策略可能阻止
      // setTimeout(() => window.close(), 100); 
    };
  </script>`;

  // 将打印脚本添加到收据HTML的末尾
  receiptHTML += printScript;

  // 4. 将处理后的HTML内容编码为 Data URI
  const URI = 'data:text/html,' + encodeURIComponent(receiptHTML);

  // 5. 在新窗口中打开 Data URI，这将加载并显示收据内容，并自动触发打印
  // '_blank' 表示在新标签页或新窗口中打开
  window.open(URI, '_blank');
}

<!-- 在你的HTML中添加一个打印按钮 -->
<button class="printButton">打印收据</button>

<script>
  // 获取按钮元素
  const button = document.querySelector('.printButton');
  // 为按钮添加点击事件监听器
  if (button) {
    button.addEventListener('click', printReceipt);
  } else {
    console.warn('未找到打印按钮 (.printButton)。');
  }
</script>