如何使用datatables或JS/jQuery将页面多个表格导出为单个CSV文件

核心思路 #

• 不依赖Datatables自带导出组件，自定义导出逻辑适配多表差异表头需求
• 遍历所有目标表格，分别处理表头和表体内容，按CSV格式规范拼接所有内容
• 拼接完成后生成Blob对象，触发浏览器下载即可

注意事项 #

• 必须处理CSV特殊字符：内容包含逗号、双引号、换行时，需要用双引号包裹内容，内容内部的双引号要转成两个双引号，避免列错位
• 如果表格开启了Datatables分页，优先用Datatables API获取数据，避免只拿到当前页的部分内容
• 不需要导出所有表格的话，给目标表格加统一类名筛选即可

代码实现 #

方案1：基于Datatables API实现（推荐，可获取全量/过滤后数据） #

// 导出所有Datatables为单个CSV
function exportAllTablesToCSV() {
  let csvContent = '';
  // CSV特殊字符转义
  const escapeCSV = (str) => {
    str = str ?? '';
    if (str.includes(',') || str.includes('"') || str.includes('\n')) {
      return `"${str.replace(/"/g, '""')}"`;
    }
    return str;
  };

  // 遍历所有已初始化的Datatables实例，visible设为false可包含隐藏表格
  $.fn.dataTable.tables({ visible: true, api: true }).each(function () {
    const table = this;
    // 拼接表头
    const headers = table.columns().header().toArray().map(th => escapeCSV(th.textContent.trim()));
    csvContent += headers.join(',') + '\r\n';
    // 拼接数据行，保留搜索过滤结果的话保留{search:'applied'}，要全量数据删掉该参数
    const rows = table.rows({ search: 'applied' }).data().toArray();
    rows.forEach(row => {
      const processedRow = row.map(cell => escapeCSV(cell?.toString().trim() ?? ''));
      csvContent += processedRow.join(',') + '\r\n';
    });
    // 不同表格之间加空行分隔，不需要可删除
    csvContent += '\r\n';
  });

  // 触发下载
  const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
  const url = URL.createObjectURL(blob);
  const downloadLink = document.createElement('a');
  downloadLink.href = url;
  downloadLink.download = '表格汇总导出.csv';
  document.body.appendChild(downloadLink);
  downloadLink.click();
  document.body.removeChild(downloadLink);
  URL.revokeObjectURL(url);
}

// 绑定到导出按钮
$('#export-all-btn').on('click', exportAllTablesToCSV);

方案2：原生JS遍历DOM实现（无Datatables依赖） #

function exportAllDomTablesToCSV() {
  let csvContent = '';
  const escapeCSV = (str) => {
    str = str ?? '';
    if (str.includes(',') || str.includes('"') || str.includes('\n')) {
      return `"${str.replace(/"/g, '""')}"`;
    }
    return str;
  };

  // 选择目标表格，可替换为自定义类名选择器如'.export-target'
  document.querySelectorAll('table').forEach(table => {
    // 拼接表头
    const headers = Array.from(table.querySelectorAll('thead th')).map(th => escapeCSV(th.textContent.trim()));
    csvContent += headers.join(',') + '\r\n';
    // 拼接数据行
    Array.from(table.querySelectorAll('tbody tr')).forEach(tr => {
      const cells = Array.from(tr.querySelectorAll('td')).map(td => escapeCSV(td.textContent.trim()));
      csvContent += cells.join(',') + '\r\n';
    });
    // 表格分隔空行，不需要可删除
    csvContent += '\r\n';
  });

  // 下载逻辑
  const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
  const url = URL.createObjectURL(blob);
  const downloadLink = document.createElement('a');
  downloadLink.href = url;
  downloadLink.download = '表格汇总导出.csv';
  document.body.appendChild(downloadLink);
  downloadLink.click();
  document.body.removeChild(downloadLink);
  URL.revokeObjectURL(url);
}

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