如何用react-html-table-to-excel导出带标题的多HTML表格到单个Excel工作表？

放弃react-html-table-to-excel的限制，改用xlsx库实现——它能完全自定义导出内容，满足带标题+多表格同工作表的需求，步骤如下：

1. 安装依赖 #

npm install xlsx

2. 页面结构调整 #

给每个表格和对应的标题套上容器，方便批量获取：

<div className="table-group">
  <h3 className="table-title">用户信息表</h3>
  <table className="export-table">
    <thead>
      <tr><th>ID</th><th>姓名</th><th>邮箱</th></tr>
    </thead>
    <tbody>
      <tr><td>1</td><td>张三</td><td>zhangsan@example.com</td></tr>
      <tr><td>2</td><td>李四</td><td>lisi@example.com</td></tr>
    </tbody>
  </table>
</div>

<div className="table-group">
  <h3 className="table-title">订单统计表</h3>
  <table className="export-table">
    <thead>
      <tr><th>订单号</th><th>金额</th><th>状态</th></tr>
    </thead>
    <tbody>
      <tr><td>OD001</td><td>199</td><td>已完成</td></tr>
      <tr><td>OD002</td><td>299</td><td>待支付</td></tr>
    </tbody>
  </table>
</div>

<button onClick={exportToExcel}>导出到Excel</button>

3. 编写导出函数 #

核心逻辑是把标题、表格内容按顺序拼接成二维数组，再转换成Excel工作表，同时处理标题的单元格合并：

import XLSX from 'xlsx';

const exportToExcel = () => {
  const worksheetData = [];
  const tableGroups = document.querySelectorAll('.table-group');
  let worksheet = XLSX.utils.aoa_to_sheet([]);

  tableGroups.forEach((group, groupIndex) => {
    // 提取标题文本
    const titleText = group.querySelector('.table-title').textContent.trim();
    // 获取当前表格的所有行
    const tableRows = group.querySelectorAll('.export-table tr');
    // 计算表格列数，用于标题合并
    const columnCount = tableRows[0].querySelectorAll('td, th').length;

    // 添加标题行，单独占一行
    worksheetData.push([titleText]);
    // 记录标题的合并范围
    const titleMerge = {
      s: { r: worksheetData.length - 1, c: 0 },
      e: { r: worksheetData.length - 1, c: columnCount - 1 }
    };

    // 遍历表格行，提取单元格内容
    tableRows.forEach(row => {
      const rowData = [];
      const cells = row.querySelectorAll('td, th');
      cells.forEach(cell => rowData.push(cell.textContent.trim()));
      worksheetData.push(rowData);
    });

    // 不同表格之间添加空行分隔（最后一个表格不加）
    if (groupIndex !== tableGroups.length - 1) {
      worksheetData.push([]);
    }

    // 存入标题合并规则
    if (!worksheet['!merges']) worksheet['!merges'] = [];
    worksheet['!merges'].push(titleMerge);
  });

  // 把二维数组转换成Excel工作表
  worksheet = XLSX.utils.aoa_to_sheet(worksheetData);
  // 创建工作簿并添加工作表
  const workbook = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(workbook, worksheet, '汇总数据');

  // 导出文件
  XLSX.writeFile(workbook, '表格汇总.xlsx');
};

额外说明 #

• 要是需要更复杂的样式（比如标题加粗、背景色），可以搭配xlsx-style库扩展，基础场景用上述代码足够
• 确保每个表格的列数计算准确，避免合并单元格出错
• 该方案支持任意数量的表格，只要按table-group的结构嵌套即可

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