Datatables导出携带popover冗余代码，求助仅导出核心数据

方法一：通过列定义的render方法区分显示与导出内容 #

在Datatables的列配置中，针对带popover的列，用render函数分别处理页面显示和导出逻辑：页面保留完整HTML保证popover功能，导出时只输出纯文本数据。

示例代码：

$('#your-table-id').DataTable({
  columns: [
    // 其他列配置...
    {
      data: null, // 根据实际数据源调整
      render: function(data, type, row) {
        // 非导出场景返回带popover的HTML
        if (type !== 'export') {
          return `<span class="custom-popover" data-toggle="popover" data-placement="top" data-html="true" title="<b>Title Here</b>" data-content="" data-trainee-id="${row.id}">
            <span style="text-decoration: underline blue; color: blue;">${row.fname} ${row.sname} ${row.tname} ${row.forname}</span>
          </span>`;
        }
        // 导出场景仅返回姓名文本
        return `${row.fname} ${row.sname} ${row.tname} ${row.forname}`;
      }
    }
    // 其他列配置...
  ],
  buttons: [
    // 你的导出按钮配置
  ]
});

方法二：通过导出按钮的exportOptions统一处理单元格内容 #

如果不想修改列定义，可在每个导出按钮的exportOptions中，自定义单元格的导出内容，提取纯文本。

完整按钮配置示例 #

// 提取通用处理函数，避免重复代码
function getExportContent(data, node) {
  if ($(node).find('.custom-popover').length) {
    return $(node).find('.custom-popover span').text().trim();
  }
  return data;
}

buttons: [
  {
    extend: 'copy',
    text: '复制',
    className: 'btn btn-muted',
    exportOptions: {
      format: {
        body: function(data, row, column, node) {
          return getExportContent(data, node);
        }
      }
    }
  },
  {
    extend: 'csv',
    text: 'CSV',
    className: 'btn btn-info',
    exportOptions: {
      format: {
        body: function(data, row, column, node) {
          return getExportContent(data, node);
        }
      }
    }
  },
  {
    extend: 'excel',
    text: 'Excel',
    className: 'btn btn-success',
    exportOptions: {
      format: {
        body: function(data, row, column, node) {
          return getExportContent(data, node);
        }
      }
    }
  },
  {
    extend: 'pdfHtml5',
    text: 'PDF',
    className: 'btn btn-danger',
    orientation: 'landscape',
    exportOptions: {
      format: {
        body: function(data, row, column, node) {
          return getExportContent(data, node);
        }
      }
    }
  },
  {
    extend: 'print',
    text: '打印',
    className: 'btn btn-warning',
    orientation: 'landscape',
    exportOptions: {
      format: {
        body: function(data, row, column, node) {
          return getExportContent(data, node);
        }
      }
    }
  }
]

原理说明 #

Datatables导出时会根据配置的渲染规则处理单元格内容，上述两种方法要么通过render函数区分显示/导出场景，要么通过exportOptions.format.body自定义导出内容，最终实现只导出核心文本，过滤掉popover相关的HTML属性代码。

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