Angular Datatable导出Excel时数组列仅导出计数而非完整数据问题咨询

问题根因 #

DataTables默认导出时会读取列render函数返回的渲染后内容，你当前的员工列render函数对所有渲染场景统一返回「首个元素+计数」的HTML结构，所以导出时只能拿到计数文本，无法读取原始的emp_list完整数组数据。

解决方案 #

你可以任选以下两种方案实现需求：

方案1：修改列render函数（推荐，适配多场景） #

通过render函数的第二个参数type区分渲染场景：

• 当type为display（表格页面渲染）时，保留原有折叠展示的HTML结构
• 其他场景（导出、排序、过滤）时，返回拼接好的完整员工列表纯文本
  修改后的员工列代码如下：

{
  title: 'Employee',
  data: 'emp_list',
  className: "email_field",
  "render": function (flag, type, r) {
    // 非页面展示场景，直接返回拼接后的完整员工列表
    if (type !== 'display') {
      return flag && flag.length ? flag.join(', ') : '';
    }
    // 页面展示场景，保留原有折叠逻辑
    let hide_class = ""
    let hide_class_empty = ""
    if (flag && (flag.length - 1 === 0 || flag.length === 0)) {
      hide_class = "d-none"
    }
    if (flag && flag.length === 0) {
      hide_class_empty = "d-none"
    }
    let email;
    if(flag && flag.length){
      email = `<span class ="${hide_class_empty}">${flag[0]}</span>&nbsp;&nbsp;<span title = "${flag.slice(1)}" class ="count_item ${hide_class}">+${flag.length - 1}</span></span>`
      return email;
    }else{
      return '';
    }
  }
},

该方案同时适配导出、排序、过滤多个场景，无需修改其他配置。

方案2：单独自定义导出规则 #

如果不需要修改排序、过滤等其他场景的逻辑，仅需要导出时展示完整员工列表，可以直接修改导出按钮的exportOptions配置，添加单独的内容格式化规则：

buttons: [{
  extend: 'excel',
  text: 'Excel',
  footer: true,
  exportOptions: {
    columns: [1,2,3,4],
    format: {
      body: function (data, rowIndex, columnIndex, node) {
        // 第4列为员工列（索引从0开始计数）
        if (columnIndex === 4) {
          // 从原始行数据中读取完整emp_list数组拼接
          return this.masterToolTableData[rowIndex].emp_list.join(', ');
        }
        return data;
      }.bind(this)
    }
  },
  title:'SupportFunction List'
}],

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