时间戳

首页 > 解决方案 > 如何在 Excel 行中设置 JSON 数据？

reactjs - 如何在 Excel 行中设置 JSON 数据？

问题描述

我在 React JS 中使用 react-data-export 将 JSON 数据导出到 excel 文件。

<ExcelFile element={<a> Download</a>}>
  <ExcelSheet data={this.state.storeDetail} name="Data">
    <ExcelColumn label="Store" value="storeNo" />
    <ExcelColumn label="RR State" value="rrState" />
    <ExcelColumn label="Store Name" value="storeName" />
    <ExcelColumn label="City" value="city" />
    <ExcelColumn label="ZBM" value="zbm" />
    <ExcelColumn label="ZBM State" value="zbmState" />
    <ExcelColumn label="Cluster Manager" value="clusterManager" />
  </ExcelSheet>
</ExcelFile>

通过使用 ExcelColumn，我可以在 excel 列中导出数据。（垂直） 在此处输入图像描述

如果我想在 Row 中设置该数据，我该怎么办。（水平）

标签： reactjs

解决方案

您也可以使用状态中的数据动态呈现ExcelColumn组件。

例子

class App extends React.Component {
  state = {
    labels: [
      { 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" }
    ]
  };

  render() {
    return (
      <ExcelFile element={<a> Download</a>}>
        <ExcelSheet data={this.state.storeDetail} name="Data">
          {this.state.labels.map(label => (
            <ExcelColumn
              key={label.value}
              label={label.label}
              value={label.value}
            />
          ))}
        </ExcelSheet>
      </ExcelFile>
    );
  }
}

推荐阅读