Datatables导出Excel时按<br>分隔符拆分列生成对应多行如何实现

核心逻辑 #

Datatables的Excel导出功能支持自定义导出前的数据预处理，你只需要在导出钩子中把原表格的单行数据，按<br>拆分value生成多条对应数据行，替换原有导出数据即可实现需求。

完整可运行代码 #

确保已经引入Datatables核心库、Buttons扩展、jszip依赖后，直接使用以下配置：

$('#你的表格ID').DataTable({
  dom: 'Bfrtip',
  buttons: [
    {
      extend: 'excelHtml5',
      text: '导出Excel',
      // 自定义导出数据的核心钩子
      customizeData: function (exportData) {
        const processedRows = [];
        // 遍历原表格所有正文行
        exportData.body.forEach(originalRow => {
          const key = originalRow[0];
          // 按<br>拆分value，兼容大小写、有无斜杠的br写法
          const valueList = originalRow[1].split(/<br\s*\/?>/i);
          // 每个value对应生成一行新数据
          valueList.forEach(val => {
            const cleanedVal = val.trim();
            // 可自行选择是否过滤空value
            if (cleanedVal) {
              processedRows.push([key, cleanedVal]);
            }
          });
        });
        // 替换原有导出数据为处理后的多行数据
        exportData.body = processedRows;
      }
    }
  ]
});

兼容场景调整 #

• 如果value实际存储的是换行符而非HTML的br标签，把拆分规则修改为split(/\n|\r\n/)即可
• 如果表格除了key、value还有其他列需要保留，拆分时把其他列的内容原样复制到每一条新生成的行中即可
• 表头、表尾内容不受上述逻辑影响，会正常导出

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