JavaScript实现网页特定区域打印：生成收据到PDF/纸张的实用指南

<!-- 主页面中的HTML结构 -->
<section class="receipt-section">
  <table class="receipt">
    <!-- 将所有收据相关的CSS样式放在这里 -->
    <style>
      .receipt {
        border-collapse: collapse;
        width: 100%; /* 调整为适合打印的宽度 */
        font-family: sans-serif;
        margin: 0 auto; /* 默认居中，但会被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="item-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>

<!-- 触发打印的按钮 -->
<button class="printButton">打印收据</button>

function printReceipt() {
  // 1. 获取目标HTML元素（收据表格）
  const receiptTable = document.querySelector('.receipt');

  // 2. 准备打印页面的居中CSS（可选）
  // 这段CSS将被动态添加到Data URI页面的style标签中，用于在打印前调整收据位置。
  const cssCentering = `
    .receipt {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      margin: 0; /* 移除可能的外部margin影响 */
      max-width: 90%; /* 调整最大宽度以适应打印区域 */
    }
  `;

  // 3. 在收据表格中注入一个脚本，该脚本在新页面加载后执行：
  //    a. 将居中CSS添加到表格内部的<style>标签中。
  //    b. 调用 window.print() 触发打印。
  // 注意：这里需要确保 .receipt 内部有一个 <style> 标签供其操作。
  // 如果没有，可以修改为创建新的 <style> 标签并追加。
  const autoPrintScript = `
    <script>
      window.onload = () => {
        // 查找表格内部的style标签并添加额外样式
        const styleTag = document.querySelector('table > style');
        if (styleTag) {
          styleTag.innerHTML += \`${cssCentering}\`;
        } else {
          // 如果没有style标签，则创建一个并添加到head或table
          const newStyle = document.createElement('style');
          newStyle.innerHTML = \`${cssCentering}\`;
          document.head.appendChild(newStyle); // 或者 receiptTable.appendChild(newStyle);
        }
        window.print(); // 触发打印
      };
    </script>
  `;

  // 将自动打印脚本暂时添加到收据表格的内部HTML中
  // 这样在获取 receiptHTML 时，脚本也会被包含进去
  receiptTable.innerHTML += autoPrintScript;

  // 4. 获取包含所有样式和脚本的整个收据区域的HTML内容
  const receiptSectionHTML = document.querySelector('.receipt-section').innerHTML;

  // 5. 将HTML内容编码为Data URI
  const URI = 'data:text/html,' + encodeURIComponent(receiptSectionHTML);

  // 6. 在新标签页中打开Data URI，这将自动触发打印
  const printWindow = window.open(URI, '_blank');

  // 7. 打印完成后，移除之前注入的脚本，恢复原始HTML（可选，但推荐）
  // 可以在新窗口关闭后执行，或者在主页面中等待一段时间后执行
  // 由于脚本已经被复制到新窗口，主页面的原始HTML可以立即恢复。
  // 这里需要找到并移除之前添加的 <script> 标签。
  // 更健壮的做法是在注入时给脚本一个ID，方便移除。
  // 简便起见，这里假设我们只注入一次，并且可以重新加载或重新生成HTML。
  // 对于动态内容，通常会在数据更新时重新生成整个receiptSectionHTML。
  // 在实际应用中，更推荐在生成URI前复制一份receiptTable.outerHTML，然后对副本进行修改。
  // 为了本例的简洁性，我们假设页面不会立即刷新，并且这个临时修改是可接受的。
  // 如果要严格恢复，需要找到并删除刚添加的 <script> 元素。
  // 例如：
  // const tempScript = receiptTable.querySelector('script:last-child');
  // if (tempScript && tempScript.innerHTML.includes('window.print()')) {
  //   tempScript.remove();
  // }
}

// 绑定打印功能到按钮
const printButton = document.querySelector('.printButton');
if (printButton) {
  printButton.addEventListener('click', printReceipt);
}