/Javascript/React/React convert excel to json

React convert excel to 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;

Source: stackoverflow.com

React convert excel to json

test,retrere

Similar codes

0 vote209 views1 answer
Header logo react native img
Javascript React
0 vote254 views1 answer
React bootstrap profile card
Javascript React
86 votes210 views3 answers
React check if window exists
Javascript React
142 votes929 views3 answers
Install react app
Javascript React
13 votes274 views3 answers
React native conditional rendering
Javascript React
0 vote214 views1 answer
React native swipe screen
Javascript React
0 vote237 views3 answers
Flatlist react native keyextractor
Javascript React
0 vote220 views1 answer
React video srcObject
Javascript React
0 vote194 views2 answers
Hide header title in react navigation Drawer navigation
Javascript React
7 votes214 views2 answers
Br in react native
Javascript React