如何导出ag-grid中使用自定义单元格渲染器的数据？

嘿，我来帮你搞定这个导出的问题！你的颜色列数据存在JSON字符串里，显示时用了cellRenderer展示色块，valueGetter取的是颜色名称，但导出时默认没法正确解析这个JSON结构，所以得专门配置导出的取值逻辑。

这里有两个靠谱的方案，你可以根据需求选择：

方案一：给列添加专门的导出取值回调（推荐） #

ag-grid提供了exportValueGetter属性，专门用来定义导出时该列要返回的值，优先级高于valueGetter，非常适合这种需要单独处理导出内容的场景。

修改你的列定义，加上这个回调：

{
  headerName: "Color",
  valueGetter: function (params) {
    return JSON.parse(params.data.color).name;
  },
  field: 'color',
  cellRenderer: function (params) {
    if (angular.isDefined(params.data) && angular.isDefined(params.data.color)) {
      var color = JSON.parse(params.data.color);
      return '<div style="width: 50px; height: 18px; background-color:' + color.htmlValue + ';"></div>';
    }
  },
  suppressMenu: true,
  suppressSorting: true,
  // 新增导出专用的取值逻辑
  exportValueGetter: function(params) {
    // 先判断数据是否存在，避免报错
    if (params.data && params.data.color) {
      const color = JSON.parse(params.data.color);
      // 这里可以根据需求返回颜色名称或者颜色码
      return color.name; // 导出颜色名称，比如"红色"
      // 如果要导出颜色值比如#FF0000，就改成 return color.htmlValue;
    }
    // 数据为空时返回空字符串
    return '';
  }
}

这样不管是导出CSV还是Excel，这个列都会自动返回你指定的值啦。

方案二：全局导出时针对性处理单元格 #

如果你是手动触发导出（比如通过按钮调用exportDataAsCsv或exportDataAsExcel），可以在导出配置里用processCellCallback来单独处理颜色列：

// 假设你有gridApi的引用
gridApi.exportDataAsCsv({
  processCellCallback: function(params) {
    // 判断当前列是否是颜色列（可以用colId或者headerName判断）
    if (params.column.getColId() === 'color') {
      if (params.data && params.data.color) {
        const color = JSON.parse(params.data.color);
        return color.name; // 同样，按需返回名称或颜色码
      }
      return '';
    }
    // 其他列用默认值
    return params.value;
  }
});

这种方式适合需要临时调整导出逻辑，或者多个列需要统一处理的场景。

小提示 #

记得在解析JSON的时候做好空值判断，避免因为数据缺失导致导出报错哦～

内容的提问来源于stack exchange，提问作者Renaud is Not Bill Gates