Angular Ag-Grid Value Getter渲染值导出Excel显示原始值如何解决

方法1：使用Ag-Grid原生API直接获取单元格显示值 #

Ag-Grid提供了直接获取渲染后值的API，不需要手动重写逻辑，适配所有配置了valueGetter/valueFormatter的列，修改你的导出函数即可：

btnExport(){
  let filtereddata = [];
  this.gridApi.forEachNodeAfterFilterAndSort(grd=> {
    const processedRow = {};
    // 遍历所有列，取渲染后的显示值而非原始值
    this.columnDefs.forEach(col => {
      processedRow[col.field] = this.gridApi.getValue(col.field, grd);
    });
    filtereddata.push(processedRow);
  });
  this.exportService.exportDataAsExcel(filtereddata, this.columnDefs, "filename");
}

方法2：手动复用现有valueGetter处理数据 #

如果你不想调用GridAPI，也可以在遍历行数据时主动调用列定义中的valueGetter处理对应字段：

btnExport(){
  let filtereddata = [];
  this.gridApi.forEachNodeAfterFilterAndSort(grd=> {
    // 拷贝原始数据后做替换处理
    const processedRow = {...grd.data};
    this.columnDefs.forEach(col => {
      if(col.valueGetter) {
        // 构造valueGetter需要的入参
        const params = {
          colDef: col,
          data: grd.data
        };
        processedRow[col.field] = col.valueGetter(params);
      }
    });
    filtereddata.push(processedRow);
  });
  this.exportService.exportDataAsExcel(filtereddata, this.columnDefs, "filename");
}

可选优化：简化现有valueGetter逻辑 #

你当前的rateValueGetter可以简化为更简洁的写法：

rateValueGetter(params): string {
  if(params.colDef.field !== "rate" || !params.data?.rate) return '';
  return params.data.rate.includes('1') ? 'Y' : 'N';
}

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