如何在 ReactJS 中以 JSON 格式从 excel 中获取数据？答案

【问题标题】：How to get the data from excel in JSON format in ReactJS?如何在 ReactJS 中以 JSON 格式从 excel 中获取数据？
【发布时间】：2020-06-16 12:06:45
【问题描述】：

我需要从 excel 中获取数据并将其以 Json 格式存储为键值对。我如何在 React 中做到这一点？

Excel 数据-

预期的 o/p-

{ “段”：“空气”， "TripName":"测试 UI 流程", “开始日期”：“2020 年 6 月 19 日”， “结束日期”：“2020 年 6 月 25 日”， “总票价”：“3948” }

【问题讨论】：

您使用的是 Excel 文件还是 CSV？如果您使用的是 CSV，则可以使用 papaparse npm 库，它能够解析 CSV 文件并返回 JSON 格式。

标签： reactjs react-native

【解决方案1】：

这是一种将（xlsx）Excel文件转换为json的方法。我已经从本地文件系统（即桌面等）获取文件。但是您可以轻松地将其转换为从服务器获取文件。

import React, { useState } from "react";
import "./App.css";
import * as XLSX from "xlsx";

class ExcelToJson extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
    this.state = {
      file: "",
    };
  }

  handleClick(e) {
    this.refs.fileUploader.click();
  }

  filePathset(e) {
    e.stopPropagation();
    e.preventDefault();
    var file = e.target.files[0];
    console.log(file);
    this.setState({ file });

    console.log(this.state.file);
  }

  readFile() {
    var f = this.state.file;
    var name = f.name;
    const reader = new FileReader();
    reader.onload = (evt) => {
      // evt = on_file_select event
      /* Parse data */
      const bstr = evt.target.result;
      const wb = XLSX.read(bstr, { type: "binary" });
      /* Get first worksheet */
      const wsname = wb.SheetNames[0];
      const ws = wb.Sheets[wsname];
      /* Convert array of arrays */
      const data = XLSX.utils.sheet_to_csv(ws, { header: 1 });
      /* Update state */
      console.log("Data>>>" + data);// shows that excel data is read
      console.log(this.convertToJson(data)); // shows data in json format
    };
    reader.readAsBinaryString(f);
  }

  convertToJson(csv) {
    var lines = csv.split("\n");

    var result = [];

    var headers = lines[0].split(",");

    for (var i = 1; i < lines.length; i++) {
      var obj = {};
      var currentline = lines[i].split(",");

      for (var j = 0; j < headers.length; j++) {
        obj[headers[j]] = currentline[j];
      }

      result.push(obj);
    }

    //return result; //JavaScript object
    return JSON.stringify(result); //JSON
  }

  render() {
    return (
      <div>
        <input
          type="file"
          id="file"
          ref="fileUploader"
          onChange={this.filePathset.bind(this)}
        />
        <button
          onClick={() => {
            this.readFile();
          }}
        >
          Read File
        </button>
      </div>
    );
  }
}

export default ExcelToJson;

readFile 函数中的控制台日志获取 json 格式的数据。

【讨论】：