AG Grid含多数据单元格导出CSV失败技术求助

我明白你遇到的困扰了——那些用cellRenderer把多个字段拼接成多行显示的列，在导出CSV时完全没有内容。你之前在columnKeys里用+拼接字段名的方式根本行不通，AG Grid没法识别这种拼接后的字符串作为有效字段。下面给你两种实用的解决方案：

方案一：用processCellCallback自定义导出的单元格值 #

你可以在导出参数里添加processCellCallback函数，针对需要拼接的列手动返回组合后的内容，不需要修改原有的列定义，直接在导出逻辑里处理就行：

onBtExport() {
  const params = {
    columnSeparator: ';',
    columnKeys: [
      'BLOCKID','DEALID','DEALCLASS','INSTRCLASS','TRADEDATE','STARTDATE',
      'FOLDERSHORTNAME','CPTYSHORTNAME','INSTRSHORTNAME','INSTRNAME',
      'QUANTITY','SETTLEAMT','FLOATINGRATESSHORTNAME','RENTSPREADFIXEDRATE',
      'DEALCAT','DEALTYPE','ENDDATE'
    ],
    // 自定义每个单元格的导出值
    processCellCallback: (params) => {
      const { column, data } = params;
      // 根据列的字段名判断需要拼接的列
      switch(column.getColId()) {
        case 'INSTRSHORTNAME':
          // 对应"ShortName \n Name"列，用空格分隔字段（CSV中会作为一个单元格）
          return `${data.INSTRSHORTNAME} ${data.INSTRNAME}`;
        case 'QUANTITY':
          // 对应"Quantity \n Settl.Amt"列
          return `${data.QUANTITY} ${data.SETTLEAMT} ${data.SETTLECURRENCIESSHORTNAME}`;
        case 'FLOATINGRATESSHORTNAME':
          // 对应"Rate \n Fees"列
          return `${data.FLOATINGRATESSHORTNAME} ${data.RENTSPREADFIXEDRATE}`;
        case 'DEALCAT':
          // 对应"Category \n Type"列
          return `${data.DEALCAT} ${data.DEALTYPE}`;
        default:
          // 其他列直接返回原始值
          return params.value;
      }
    }
  };
  this.gridApi.exportDataAsCsv(params);
}

这里我把你原本拼接的字段拆成了单独的列Key，然后在回调函数里把需要组合的字段合并成一个值返回，这样导出的CSV里这些内容会正常显示在对应的单元格中。

方案二：给列添加valueGetter（更推荐） #

如果希望表格的显示逻辑和导出逻辑保持统一，最好给那些用cellRenderer的列添加valueGetter，这样AG Grid在导出时会自动使用valueGetter返回的值，不需要在导出参数里额外处理：

修改你的columnDefs中对应的列：

columnDefs = [
  // ...其他列定义
  {
    headerName: 'ShortName \n Name',
    colId: 'shortNameName', // 给列设置唯一ID，方便导出时指定
    cellRenderer: function(params){
      return params.data.INSTRSHORTNAME + '<br/>' + params.data.INSTRNAME
    },
    valueGetter: (params) => `${params.data.INSTRSHORTNAME} ${params.data.INSTRNAME}`, // 导出用的拼接值
    width:250, resizable:true, sortable: false
  },
  {
    headerName: 'Quantity \n Settl.Amt',
    colId: 'quantitySettlAmt',
    cellRenderer: function(params){
      return params.data.QUANTITY + '<br/>' + params.data.SETTLEAMT + '\n'+ params.data.SETTLECURRENCIESSHORTNAME
    },
    valueGetter: (params) => `${params.data.QUANTITY} ${params.data.SETTLEAMT} ${params.data.SETTLECURRENCIESSHORTNAME}`,
    width:200, resizable:true, sortable: false
  },
  {
    headerName: 'Rate \n Fees',
    colId: 'rateFees',
    cellRenderer: function(params){
      return params.data.FLOATINGRATESSHORTNAME + '<br/>' + params.data.RENTSPREADFIXEDRATE
    },
    valueGetter: (params) => `${params.data.FLOATINGRATESSHORTNAME} ${params.data.RENTSPREADFIXEDRATE}`,
    width:200, resizable:true, sortable: false
  },
  {
    headerName: 'Category \n Type',
    colId: 'categoryType',
    cellRenderer: function(params){
      return params.data.DEALCAT + '<br/>' + params.data.DEALTYPE
    },
    valueGetter: (params) => `${params.data.DEALCAT} ${params.data.DEALTYPE}`,
    width:200, resizable:true, sortable: false
  },
  // ...其他列定义
];

然后导出时直接用列的colId指定即可，逻辑非常简洁：

onBtExport() {
  const params = {
    columnSeparator: ';',
    columnKeys: [
      'BLOCKID','DEALID','DEALCLASS','INSTRCLASS','TRADEDATE','STARTDATE',
      'FOLDERSHORTNAME','CPTYSHORTNAME','shortNameName','quantitySettlAmt',
      'rateFees','categoryType','ENDDATE'
    ]
  };
  this.gridApi.exportDataAsCsv(params);
}

两种方案都能解决你的问题，方案二更符合AG Grid的设计理念，它让列的显示和导出逻辑保持一致，后续维护起来也更省心。

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