React项目中导出含嵌套表格的Div至Excel的问题求助

使用react-html-table-to-excel-3这类依赖DOM解析的导出库时，嵌套在单元格内的子表格会被直接忽略——这类库只会读取单元格的文本内容，不会递归解析内部表格结构。以下是几种可行的解决方法：

方案一：用xlsx库手动构建导出数据 #

直接从数据源生成Excel结构，完全不依赖DOM解析，灵活性最高。

1. 安装依赖：

npm install xlsx

2. 编写导出逻辑：

import XLSX from 'xlsx';

const exportNestedTable = () => {
  // 把嵌套表格数据转换成二维数组，子表格行对应外层空行
  const exportData = [
    ['Column One', 'Column Two', 'Column Three'],
    ['row1 Col1', 'row1 Col2', 'row 1.1'],
    ['', '', 'data 1'],
    ['row2 Col1', 'row2 Col2', 'row2 Col3'],
    ['row3 Col1', 'row3 Col2', '']
  ];

  // 生成工作簿和工作表
  const worksheet = XLSX.utils.aoa_to_sheet(exportData);
  const workbook = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');

  // 导出文件
  XLSX.writeFile(workbook, 'nested-table.xlsx');
};

// 组件内的导出按钮
<button onClick={exportNestedTable}>导出Excel</button>

这种方式需要手动映射业务数据到导出数组，适合数据结构可控的场景，导出后的Excel会保持子表格的行结构。

方案二：预处理DOM结构，展开嵌套表格后导出 #

如果不想手动维护数据数组，可以先复制并修改DOM，把嵌套表格的行合并到外层表格，再用xlsx导出。

import XLSX from 'xlsx';

const exportProcessedTable = () => {
  // 复制原始表格，避免修改页面上的真实DOM
  const originalTable = document.querySelector('#dvData table');
  const clonedTable = originalTable.cloneNode(true);

  const rows = Array.from(clonedTable.querySelectorAll('tr'));
  let rowIndex = 1; // 跳过表头行

  while (rowIndex < rows.length) {
    const cells = Array.from(rows[rowIndex].querySelectorAll('td'));
    
    cells.forEach((cell, cellIdx) => {
      const subTable = cell.querySelector('table');
      if (!subTable) return;

      // 提取子表格的所有行内容
      const subRowContents = Array.from(subTable.querySelectorAll('tr'))
        .map(tr => tr.textContent.trim());

      // 把第一行内容放到当前单元格，移除子表格
      cell.textContent = subRowContents[0];
      cell.removeChild(subTable);

      // 为子表格剩余行创建新的外层行，其他单元格留空
      for (let i = 1; i < subRowContents.length; i++) {
        const newRow = document.createElement('tr');
        for (let k = 0; k < cells.length; k++) {
          const newCell = document.createElement('td');
          if (k === cellIdx) newCell.textContent = subRowContents[i];
          newRow.appendChild(newCell);
        }
        // 插入到当前行的下一行
        clonedTable.insertBefore(newRow, rows[rowIndex + 1]);
        rows.splice(rowIndex + 1, 0, newRow);
      }
    });

    rowIndex++;
  }

  // 基于处理后的DOM生成Excel
  const worksheet = XLSX.utils.table_to_sheet(clonedTable);
  const workbook = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
  XLSX.writeFile(workbook, 'processed-nested-table.xlsx');
};

// 导出按钮
<button onClick={exportProcessedTable}>导出处理后的表格</button>

该方案自动解析DOM结构，适合无法直接获取原始数据的场景，导出后子表格内容会展开到外层表格的对应列。

方案三：使用支持嵌套表格的导出插件 #

如果倾向于用现成插件，tableexport.jquery.plugin支持直接解析嵌套表格结构：

1. 安装依赖：

npm install tableexport.jquery.plugin jquery

2. 实现导出逻辑：

import $ from 'jquery';
import 'tableexport.jquery.plugin/tableexport.min';
import { useEffect } from 'react';

const NestedTableExport = () => {
  useEffect(() => {
    // 初始化导出插件
    $('#dvData table').tableExport({
      type: 'xlsx',
      filename: 'nested-table',
      exportButtons: false // 隐藏默认按钮，用自定义按钮触发
    });
  }, []);

  const exportWithPlugin = () => {
    $('#dvData table').tableExport('export', 'xlsx');
  };

  return <button onClick={exportWithPlugin}>导出Excel</button>;
};

export default NestedTableExport;

这个插件会自动识别嵌套表格并完整导出，无需手动处理数据或DOM，适合快速实现需求的场景。

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