如何将ag-grid中的“Total”汇总行导出至Excel?
AG-Grid 分组总汇总行Excel导出修复方案
问题情况
我用AG-Grid按product和category列做了分组,数据结构如下:
product category price1 price2 price3 apple fruit1 3 4 5 apple fruit2 6 8 5 carrot veg1 5 6 9 carrot veg2 58 25 60 Total 72 43 79
导出Excel时,所有普通行都能正常导出,但底部的「Total」总汇总行导不出来。知道得用processRowGroupCallback来处理,但自己写的代码没生效,现有尝试代码如下:
const excel_sheet_name = fileName; const excel_params = { fileName: `${fileName}.xlsx`, sheetName: excel_sheet_name, processRowGroupCallback: function (params) { // 检查是否为Total汇总行 if (params.node.group && params.node.key === "Total") { // 克隆节点数据 var clonedData = Object.assign({}, params.node.data); // 删除group字段 delete clonedData["group"]; // 返回修改后的数据 return clonedData; } // 普通分组行或叶子节点返回null return null; } }; const onExportClick2 = useCallback(() => { gridRef.current.api.exportDataAsExcel(excel_params); }, [excel_params]);
问题原因
你之前的判断逻辑有误——AG-Grid的底部总汇总行,它的node.key并不是「Total」,这类行有专属标识:node.level为-1(代表根级总汇总),同时带有aggData属性存储汇总计算值。
正确实现代码
const excel_sheet_name = fileName; const excel_params = { fileName: `${fileName}.xlsx`, sheetName: excel_sheet_name, processRowGroupCallback: function (params) { // 识别根级总汇总行 if (params.node.group && params.node.level === -1) { // 构建与原数据列匹配的汇总行数据 return { product: 'Total', category: '', // 对应原数据中Total行的空值 price1: params.node.aggData.price1, price2: params.node.aggData.price2, price3: params.node.aggData.price3 }; } // 不需要导出的分组行/普通行返回null return null; } }; const onExportClick2 = useCallback(() => { gridRef.current.api.exportDataAsExcel(excel_params); }, [excel_params]);
补充说明
- 确保AG-Grid配置已开启总汇总功能(比如设置
gridOptions.groupIncludeTotalFooter: true),否则node.aggData不会生成对应汇总值 - 如果需要同时导出分组内的子汇总行,可以扩展判断逻辑:比如判断
params.node.level >= 0且params.node.aggData存在,再返回对应分组的汇总数据对象
内容的提问来源于stack exchange,提问作者sandy
相关产品推荐
相关产品推荐

