JavaScript 递归提取嵌套表格数据并导出为标准 CSV 教程

本文详解如何正确遍历含嵌套 <table> 的 HTML 表格结构，递归提取所有有效数据行（跳过 colspan 占位行和空嵌套容器），生成格式规范、行列对齐的 CSV 文件。

本文详解如何正确遍历含嵌套 `

在实际前端开发中，动态渲染的层级化数据常通过嵌套 <table> 实现（如“主用户 + 关联子用户”结构）。但直接使用 querySelectorAll('tbody tr') 会将包裹嵌套表的 <tr>（如含 colspan="3" 的占位行）误判为有效数据行，导致 CSV 输出错乱——例如把整个嵌套表内容拼接成单个单元格，或遗漏深层嵌套行。

根本问题在于：必须区分“展示占位行”与“真实数据行”。理想策略是：
✅ 仅提取具有完整列数（如 3 列）的 <tr>；
✅ 对含嵌套 <table> 的 <td>，递归进入其 <tbody> 提取子行；
❌ 跳过 colspan > 1 的 <td> 所在行（它们本身不承载数据，仅作容器）；
❌ 忽略无 <td> 或 <td> 数量不匹配的无效行。

以下为健壮、可复用的实现方案：

/**
 * 从 DOM 表格中提取所有扁平化数据行（支持嵌套 table）
 * @param {HTMLTableElement} table - 根表格元素
 * @returns {string[][]} 二维数组，每项为一行的字符串值数组
 */
function extractTableData(table) {
  const headers = Array.from(table.querySelectorAll('thead th'))
    .map(th => th.textContent.trim());

  const rows = [];

  // 递归处理指定节点下的所有 tbody > tr
  function collectRows(context) {
    const tbodyElements = context.querySelectorAll('tbody');
    tbodyElements.forEach(tbody => {
      tbody.querySelectorAll('tr').forEach(tr => {
        // 跳过包含 colspan 占位单元格的行（它们不是数据行）
        const hasColspanCell = tr.querySelector('td[colspan], th[colspan]');
        if (hasColspanCell) {
          // 递归提取该单元格内嵌套的 table 数据
          const nestedTables = tr.querySelectorAll('td table, th table');
          nestedTables.forEach(nestedTable => {
            collectRows(nestedTable);
          });
          return;
        }

        // 提取当前行的有效 td/th 文本
        const cells = Array.from(tr.querySelectorAll('td, th'))
          .map(cell => cell.textContent.trim());

        // 仅保留列数与 header 匹配的行（确保结构一致）
        if (cells.length === headers.length && cells.some(cell => cell !== '')) {
          rows.push(cells);
        }
      });
    });
  }

  collectRows(table);
  return [headers, ...rows];
}

/**
 * 将二维数组转换为 CSV 字符串（自动转义含逗号/换行/引号的字段）
 * @param {string[][]} data - 行数据二维数组
 * @returns {string} CSV 格式字符串
 */
function arrayToCsv(data) {
  return data.map(row => 
    row.map(cell => {
      // 若字段含逗号、双引号或换行符，用双引号包裹，并将内部双引号转义为两个双引号
      if (/[,\"\n\r]/.test(cell)) {
        return `"${cell.replace(/"/g, '""')}"`;
      }
      return cell;
    }).join(',')
  ).join('\n');
}

/**
 * 触发 CSV 文件下载
 * @param {string} csvContent - CSV 字符串
 * @param {string} filename - 下载文件名（默认 GfG.csv）
 */
function downloadCsv(csvContent, filename = 'GfG.csv') {
  const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
  const url = URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.href = url;
  link.download = filename;
  link.style.display = 'none';
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
  URL.revokeObjectURL(url); // 清理内存
}

// 使用示例
function exportToCsv() {
  const table = document.querySelector('table');
  if (!table) return;

  try {
    const data = extractTableData(table);
    const csv = arrayToCsv(data);
    console.log('Generated CSV:\n', csv);
    downloadCsv(csv);
  } catch (err) {
    console.error('CSV export failed:', err);
  }
}

✅ 关键设计说明：

• extractTableData() 采用深度优先递归，精准跳过 colspan 占位行，只从真正承载数据的 <tr> 中提取单元格；
• arrayToCsv() 实现 RFC 4180 兼容的 CSV 转义逻辑（处理逗号、换行、引号），避免 Excel 解析错误；
• 所有 DOM 查询均使用现代 Array.from() 和箭头函数，简洁且兼容主流浏览器（IE11+ 需加 polyfill）；
• 错误边界已封装在 try/catch 中，保障生产环境鲁棒性。

调用 exportToCsv() 即可一键导出如下标准 CSV（以题干示例结构为准）：

绘蛙

电商场景的AI创作平台，无需高薪聘请商拍和文案团队，使用绘蛙即可低成本、批量创作优质的商拍图、种草文案

下载

立即学习“Java免费学习笔记（深入）”；

Name,Age,Town
Tom,20,London
Jack,30,Glasgow
Sam,40,Belfast
Alex,50,Hull
Josh,20,Cardiff

⚠️ 注意事项：

• 确保目标 <table> 具有明确的 <thead> 和 <tbody> 结构，否则需调整选择器；
• 若嵌套表存在多级（如表中套表再套表），本方案仍适用，因 collectRows() 会持续递归；
• 如需支持中文 Excel 正确显示，请在 downloadCsv 中将 Blob 类型改为 'text/csv;charset=utf-8;'（已内置）；
• 对超大表格（>10,000 行），建议添加节流或 Web Worker 优化性能。

此方案兼顾可读性、健壮性与工业级可用性，可直接集成至管理后台、报表系统等需要动态导出场景。