React使用react-csv导出CSV：表头需以行形式排列

要实现Label和Value作为行、其余数据作为列的CSV导出，你需要调整数据结构和表头配置——react-csv默认按对象数组的每个条目生成一行，我们只需把原数据转成单条对象，让每个Label作为列名、对应的Value作为列值即可。

修改后的代码实现 #

首先调整数据和表头的生成逻辑：

// 将原metadata数组转换为单条对象，key为label，value为对应的值
const transformedData = [
  data.metadata.reduce((acc, item) => {
    acc[item.label] = item.value;
    return acc;
  }, {})
];

// 生成新的表头，每个label作为列标题
const newHeaders = data.metadata.map(item => ({
  label: item.label,
  key: item.label
}));

然后更新CSVLink组件的配置：

<CSVLink
  data={transformedData}
  headers={newHeaders}
  filename="Metadata.csv"
  separator={';'}
  className="test"
  target="_blank"
>
  {t('Export')}
</CSVLink>

效果说明 #

导出后的CSV文件会呈现如下结构：

完全符合你要求的「Label作为列标题（行）、Value作为对应列数据（行）」的排列方式。

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