React中如何实现页面指定区域打印？点击按钮仅打印账单区域

这里提供几种实用方案，帮你实现只打印账单区域的需求：

方法一：CSS打印媒体查询（推荐） #

利用CSS的@media print规则，在打印时自动隐藏不需要的元素，只保留账单区域。操作简单，无需复杂JS逻辑。

步骤： #

1. 给导航栏、侧边栏和账单区域分别添加类名（比如.navbar、.sidebar、.bill-container）。
2. 在样式表中添加打印专属样式：

@media print {
  /* 隐藏导航栏和侧边栏 */
  .navbar, .sidebar {
    display: none !important;
  }
  /* 确保账单区域占满打印页面，清除多余边距 */
  .bill-container {
    width: 100%;
    margin: 0;
    padding: 0;
  }
  /* 重置页面默认边距，避免打印留白过多 */
  body {
    margin: 0;
    padding: 0;
  }
}

3. 按钮点击事件直接调用window.print()即可：

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

方法二：克隆账单到新窗口打印 #

如果不想修改原页面的打印样式，可以把账单内容克隆到新窗口，在新窗口单独打印。

代码示例： #

function printBill() {
  const billElement = document.querySelector('.bill-container');
  // 打开空白新窗口
  const printWindow = window.open('', '_blank');
  // 写入账单内容和打印样式
  printWindow.document.write(`
    <html>
      <head>
        <title>账单打印</title>
        <style>
          body { font-family: "Microsoft Yahei", sans-serif; }
          .bill-container { width: 100%; padding: 20px; }
          /* 可根据需求添加更多打印样式 */
        </style>
      </head>
      <body>
        ${billElement.innerHTML}
      </body>
    </html>
  `);
  // 完成文档写入
  printWindow.document.close();
  // 触发打印
  printWindow.print();
  // 打印后自动关闭窗口（部分浏览器可能需要用户手动确认）
  printWindow.close();
}

绑定按钮点击：<button onclick="printBill()">打印账单</button>

方法三：临时隐藏元素，打印后恢复 #

通过JS临时隐藏导航栏和侧边栏，打印完成后再恢复原状态。注意要监听afterprint事件确保元素能恢复。

代码示例： #

function printBill() {
  const navbar = document.querySelector('.navbar');
  const sidebar = document.querySelector('.sidebar');
  // 保存元素原显示状态
  const originalNavbarStyle = navbar.style.display;
  const originalSidebarStyle = sidebar.style.display;

  // 隐藏不需要的元素
  navbar.style.display = 'none';
  sidebar.style.display = 'none';

  // 触发打印
  window.print();

  // 打印完成后恢复元素状态
  function restoreLayout() {
    navbar.style.display = originalNavbarStyle;
    sidebar.style.display = originalSidebarStyle;
    window.removeEventListener('afterprint', restoreLayout);
  }
  window.addEventListener('afterprint', restoreLayout);
}

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