如何使用react-data-export将JSON数据横向导出为Excel行？

我之前也碰到过类似的需求，react-data-export默认是把每条JSON数据作为一行导出，但要实现横向导出（把原来的字段列转成行，每条数据转成列），核心是先转置你的原始数据集，再用转置后的数据生成Excel表格。下面是具体的实现步骤：

第一步：整理字段映射 #

先把你原来ExcelColumn里的label和value抽成一个数组，方便后续统一处理：

const fieldMap = [
  { label: "Store", value: "storeNo" },
  { label: "RR State", value: "rrState" },
  { label: "Store Name", value: "storeName" },
  { label: "City", value: "city" },
  { label: "ZBM", value: "zbm" },
  { label: "ZBM State", value: "zbmState" },
  { label: "Cluster Manager", value: "clusterManager" },
];

第二步：编写数据转置函数 #

这个函数会把你的原始纵向数据转换成横向结构——每个字段对应一行，每条原始数据对应一列：

const transposeData = (originalData, fields) => {
  // 遍历每个字段，生成转置后的行
  return fields.map(field => {
    const transposedRow = { Field: field.label };
    // 为每条原始数据添加对应的字段值到当前行
    originalData.forEach((item, index) => {
      transposedRow[`Data ${index + 1}`] = item[field.value] || ""; // 处理空值避免导出异常
    });
    return transposedRow;
  });
};

第三步：在组件中使用转置后的数据 #

在你的组件里，先计算出转置后的数据集，再动态生成Excel列（因为每条原始数据对应一个列，数量可能会变化）：

class YourComponent extends React.Component {
  // ... 你的其他组件逻辑
  
  render() {
    const originalData = this.state.storeDetail;
    // 生成转置后的数据集
    const transposedData = transposeData(originalData, fieldMap);
    // 动态生成Excel列：每条原始数据对应一个列
    const dynamicColumns = originalData.map((_, index) => (
      <ExcelColumn 
        key={index} 
        label={`Data ${index + 1}`} 
        value={`Data ${index + 1}`} 
      />
    ));

    return (
      <div>
        {/* 横向导出的Excel下载按钮 */}
        <ExcelFile element={<a> Download Transposed Excel</a>}>
          <ExcelSheet data={transposedData} name="Transposed Data">
            {/* 第一列显示字段名称 */}
            <ExcelColumn label="Field Name" value="Field" />
            {/* 动态渲染每条数据对应的列 */}
            {dynamicColumns}
          </ExcelSheet>
        </ExcelFile>
      </div>
    );
  }
}

效果说明 #

转置后的Excel结构会变成这样：

这样就实现了你要的横向导出效果，而且如果原始数据的条数或者字段有变化，代码会自动适应，不需要手动修改ExcelColumn。

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