如何导出jQuery DataTables中的嵌套子表格？

核心结论 #

jQuery DataTables支持导出嵌套子表格，但需要自定义导出逻辑——默认导出工具只会抓取DataTables实例管理的主表数据，不会自动识别隐藏或动态生成的子表格。以下是两种实用实现方案：

方案一：导出所有子表格（无论是否展开） #

适合需要完整导出主表+所有子表数据的场景，无需依赖页面展开状态：

$('#ContentContainer_MainContent_gvTransaction').DataTable({
  dom: 'Bfrtip',
  buttons: [
    {
      extend: 'excelHtml5',
      customize: function(xlsx) {
        // 获取Excel第一个工作表
        var sheet = xlsx.xl.worksheets['sheet1.xml'];
        var rowIndex = $('row', sheet).length;
        
        // 遍历主表每一行
        $('#ContentContainer_MainContent_gvTransaction tbody tr').each(function() {
          // 提取主表行数据
          var mainRowData = $(this).find('td').map(function() {
            return $(this).text().trim();
          }).get();
          
          // 查找当前行对应的隐藏子表格
          var subTable = $(this).find('.subtable');
          if (subTable.length > 0) {
            // 遍历子表格数据行（跳过表头）
            subTable.find('tbody tr').each(function(subRowIdx) {
              var subRowData = $(this).find('td').map(function() {
                return $(this).text().trim();
              }).get();
              
              // 子表第一行前插入主表数据作为分组标识
              if (subRowIdx === 0) {
                $('sheetData', sheet).append(`
                  <row r="${rowIndex+1}">
                    ${mainRowData.map((val, idx) => `<c r="${String.fromCharCode(65+idx)}${rowIndex+1}"><v>${val}</v></c>`).join('')}
                  </row>
                `);
                rowIndex++;
              }
              // 插入子表行数据（首列留空区分层级）
              $('sheetData', sheet).append(`
                <row r="${rowIndex+1}">
                  ${[''].concat(subRowData).map((val, idx) => `<c r="${String.fromCharCode(65+idx)}${rowIndex+1}"><v>${val}</v></c>`).join('')}
                </row>
              `);
              rowIndex++;
            });
          }
        });
      }
    }
  ]
});

方案二：仅导出已展开的子表格 #

适合只导出页面上已展开的子表数据的场景，直接抓取DOM中已生成的子表行：

$('#ContentContainer_MainContent_gvTransaction').DataTable({
  dom: 'Bfrtip',
  buttons: [
    {
      extend: 'excelHtml5',
      exportOptions: {
        // 包含主表行和已展开的子表行
        rows: function(idx, data, node) {
          return $(node).hasClass('subtableRow') || $(node).closest('table').attr('id') === 'ContentContainer_MainContent_gvTransaction';
        },
        columns: ':visible'
      },
      customize: function(xlsx) {
        // 可选：给子表行添加缩进样式区分层级
        var sheet = xlsx.xl.worksheets['sheet1.xml'];
        $('row', sheet).each(function() {
          if ($(this).find('c').length > 1 && $(this).find('c:first v').text() === '') {
            $('c:first', this).attr('s', '2');
          }
        });
      }
    }
  ]
});

替代库：SheetJS（XLSX.js） #

如果觉得DataTables自定义导出过于繁琐，可以直接用SheetJS手动构建导出数据，灵活性更高：

function exportAllData() {
  var workbook = XLSX.utils.book_new();
  var exportData = [];
  
  // 添加主表表头
  var mainHeaders = $('#ContentContainer_MainContent_gvTransaction thead th').map(function() {
    return $(this).text().trim();
  }).get();
  exportData.push(mainHeaders);
  
  // 遍历主表和子表数据
  $('#ContentContainer_MainContent_gvTransaction tbody tr').each(function() {
    // 添加主表行
    var mainRow = $(this).find('td').map(function() {
      return $(this).text().trim();
    }).get();
    exportData.push(mainRow);
    
    // 添加子表数据
    var subTable = $(this).find('.subtable');
    if (subTable.length > 0) {
      // 添加子表表头（首列留空）
      var subHeaders = subTable.find('thead th').map(function() {
        return $(this).text().trim();
      }).get();
      exportData.push([''].concat(subHeaders));
      
      // 添加子表行（首列留空）
      subTable.find('tbody tr').each(function() {
        var subRow = $(this).find('td').map(function() {
          return $(this).text().trim();
        }).get();
        exportData.push([''].concat(subRow));
      });
    }
  });
  
  // 生成并导出Excel文件
  var worksheet = XLSX.utils.aoa_to_sheet(exportData);
  XLSX.utils.book_append_sheet(workbook, worksheet, '交易明细');
  XLSX.writeFile(workbook, '交易数据导出.xlsx');
}

// 绑定自定义导出按钮
$('#customExportBtn').click(exportAllData);

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