React.js中使用Papa.unparse生成CSV时底部添加Total总计行的实现方案

代码修改方案 #

你需要先计算待汇总列的数值总和，再在原数据行后追加空行对象、总计行对象，再传入Papa.unparse即可，完整代码如下：

// 先计算需要汇总的数值，示例是汇总Value3的总和，可按需调整汇总规则
const totalValue = items.reduce((acc, item) => acc + Number(item.value3 ?? 0), 0);

const csvContent = Papa.unparse(
  items.map(({ value1, value2, value3}, i) => {
    return {
      Index: i + 1,
      Name: value1,
      Value2: value2,
      Value3: value3,
    };
  // 追加空行、总计行
  }).concat([
    {}, // 空对象对应CSV空行，所有字段自动填充为空
    {
      Name: 'Total',
      Value3: totalValue
      // 其余字段不赋值自动留空，符合预期的Total布局效果
    }
  ])
);

补充说明 #

• 追加的空对象会被Papa解析为所有列都为空的行，就是你需要的间隔空行
• 总计行只赋值Name为Total和对应汇总列的数值，其余列自动留空，和你给出的预期结构完全匹配
• 如果需要汇总多列，只需要在reduce里计算对应列的总和，在总计行对象里补充对应字段的赋值即可
• 如果你实际生成的CSV表头第二列为Value1而非Name，把总计行对象里的Name键改为Value1即可

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