Angular TypeScript项目中Ag Grid含图文自定义列导出Excel时仅提取文本的实现方法咨询

这个问题我之前在Angular项目里也碰到过——自定义列因为是图片加文本的组合渲染，导出时Ag Grid默认会把渲染后的对象转成字符串，就出现了[object]。要只导出文本内容，有两种非常实用的方案：

方案一：在列定义中指定导出专用值（推荐） #

Ag Grid提供了exportValueGetter属性，专门用来定义导出时该列要获取的值，完全不影响前端的渲染效果。

假设你的自定义列是通过cellRenderer渲染图片+文本，列定义可以这么写：

columnDefs = [
  // 其他列配置...
  {
    headerName: '自定义图文列',
    colId: 'customTextImageCol', // 可选，方便后续识别列
    // 前端渲染的自定义逻辑
    cellRenderer: (params) => {
      return `<img src="${params.data.imageUrl}" alt="图标" style="width:20px;" /> ${params.data.displayText}`;
    },
    // 关键：指定导出时要返回的文本内容
    exportValueGetter: (params) => {
      // 直接返回你需要导出的文本字段
      return params.data.displayText;
    }
  }
];

这样无论是用默认的右键导出，还是调用API导出，该列都会导出displayText的内容，而不是[object]。

方案二：在导出API中全局处理单元格值 #

如果你用的是Ag Grid Enterprise的excelExport() API，可以通过processCellCallback回调函数，针对特定列做导出值的处理：

// 导出按钮点击事件
exportToExcel() {
  this.gridApi?.excelExport({
    processCellCallback: (params) => {
      // 判断当前列是目标自定义列时，返回文本值
      if (params.column.colId === 'customTextImageCol') {
        return params.data.displayText;
      }
      // 其他列保持默认导出值
      return params.value;
    }
  });
}

注意事项 #

• 如果你的自定义列是用Angular组件作为cellRendererFramework，同样可以用exportValueGetter，只要能从params.data中拿到对应的文本字段即可；
• 如果文本是渲染时动态生成的（不是直接存在data里），那需要把生成后的文本提前存在params.data的某个属性里，或者在exportValueGetter里复现同样的生成逻辑。

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