如何使用 JavaScript 递归遍历嵌套表格并导出为规范 CSV 文件

以下是一个生产就绪的解决方案，支持任意嵌套层级、自动对齐列数、并兼容 CSV 转义规则（如含逗号、换行、引号的单元格内容）：

/**
 * 将 HTML 表格（含嵌套表）导出为 CSV 字符串
 * @param {string|Element} tableSelectorOrElement - 表格选择器或 DOM 元素
 * @returns {string} 格式化的 CSV 字符串（含 BOM，UTF-8 安全）
 */
function exportTableToCsv(tableSelectorOrElement) {
  const table = typeof tableSelectorOrElement === 'string'
    ? document.querySelector(tableSelectorOrElement)
    : tableSelectorOrElement;

  if (!table) throw new Error('Table not found');

  // 提取表头（优先从 thead， fallback 到第一行 tbody tr）
  const thead = table.querySelector('thead');
  const headers = thead 
    ? [...thead.querySelectorAll('th, td')].map(th => th.textContent.trim())
    : [...table.querySelector('tbody tr')?.children || []].map(td => td.textContent.trim());

  // 递归收集所有有效数据行（排除 colspan 容器行，提取嵌套表内真实 tr）
  const rows = [];

  function collectRows(tbody) {
    if (!tbody) return;
    [...tbody.children].forEach(tr => {
      // 跳过仅含 colspan 单元格的容器行（不包含实际数据）
      const cells = [...tr.children];
      const isContainerRow = cells.some(cell => 
        cell.hasAttribute('colspan') && 
        parseInt(cell.getAttribute('colspan')) > 1 &&
        !cell.querySelector('table') // 纯容器，无嵌套表则忽略
      );

      if (isContainerRow) {
        // 递归处理该单元格内的嵌套表格
        const nestedTables = tr.querySelectorAll('table');
        nestedTables.forEach(nestedTable => {
          const nestedTbodies = nestedTable.querySelectorAll('tbody');
          nestedTbodies.forEach(tbody => collectRows(tbody));
        });
      } else {
        // 普通行：提取所有 td/th 文本（已 trim）
        const rowData = cells.map(cell => cell.textContent.trim());
        rows.push(rowData);
      }
    });
  }

  // 从所有 tbody 开始收集（包括顶层和嵌套）
  const topTbodies = table.querySelectorAll('tbody');
  topTbodies.forEach(tbody => collectRows(tbody));

  // CSV 转义工具函数（RFC 4180 兼容）
  const escapeCsvCell = (str) => {
    if (str === null || str === undefined) return '';
    const s = String(str).replace(/"/g, '""'); // 双引号转义
    return s.includes(',') || s.includes('\n') || s.includes('"') ? `"${s}"` : s;
  };

  // 构建 CSV：表头 + 数据行
  const csvLines = [
    headers.map(escapeCsvCell).join(','),
    ...rows.map(row => row.map(escapeCsvCell).join(','))
  ];

  // 添加 UTF-8 BOM 防止 Excel 中文乱码
  return '\uFEFF' + csvLines.join('\n');
}

// 下载函数（增强版，支持文件名与 MIME 类型）
function downloadCsv(csvString, filename = 'export.csv') {
  const blob = new Blob([csvString], { type: 'text/csv;charset=utf-8;' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = filename;
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  URL.revokeObjectURL(url);
}

// 使用示例
document.getElementById('exportBtn').addEventListener('click', () => {
  try {
    const csv = exportTableToCsv('table'); // 或传入具体 table 元素
    downloadCsv(csv, 'user-profiles.csv');
  } catch (err) {
    console.error('CSV export failed:', err);
  }
});

✅ 关键特性说明：

VIVA

一个免费的AI创意视觉设计平台

下载

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

• ✅ 精准过滤容器行：通过检测 colspan > 1 且无嵌套