How To Convert Excel File Data Into Json Using xlsx In React Js

In this article, we learn how to convert excel file data into JSON data in react app.

Now install xlsx dependency and import it to the App.js

npm i xlsx

import XLSX from 'xlsx';

Then take input filed for file select and also add input as a button in App.js

<div>
      <label htmlFor="file">Upload an excel to Process Triggers</label>
      <br />
      <input
        type="file"
        className="form-control"
        id="file"
        onChange={handleChange}
        accept=".xls,.xlsx"
      />
      <br />
      <input
        type="submit"
        value="Process Triggers"
        onClick={handleFile}
      />
</div>

On handleChange event we need to set the file in one state.

const [file, setfile] = useState({})

const handleChange = (e) => {
    const files = e.target.files;
    if (files && files[0]) {
      setfile(files[0])
    }
}

Now on the button click event need to convert excel data to JSON.

const [data, setdata] = useState([])

const handleFile = () => {
    const reader = new FileReader();
    const rABS = !!reader.readAsBinaryString;

    reader.onload = (e) => {
      const bstr = e.target.result;
      const wb = XLSX.read(bstr, {
        type: rABS ? 'binary' : 'array',
        bookVBA: true,
      });
      const wsname = wb.SheetNames[0];
      const ws = wb.Sheets[wsname];
      const datas = XLSX.utils.sheet_to_json(ws);
      setdata(datas)
    };

    if (rABS) {
      reader.readAsBinaryString(file);
    } else {
      reader.readAsArrayBuffer(file);
    }
}

We need to show data on our page. So, my App.js looks like this,

import React, { useState } from 'react';
import XLSX from 'xlsx';
import './App.css';

function App() {
  const [file, setfile] = useState({})
  const [data, setdata] = useState([])

  const handleChange = (e) => {
    const files = e.target.files;
    if (files && files[0]) {
      setfile(files[0])
    }
  }

  const handleFile = () => {
    const reader = new FileReader();
    const rABS = !!reader.readAsBinaryString;

    reader.onload = (e) => {
      const bstr = e.target.result;
      const wb = XLSX.read(bstr, {
        type: rABS ? 'binary' : 'array',
        bookVBA: true,
      });
      const wsname = wb.SheetNames[0];
      const ws = wb.Sheets[wsname];
      const datas = XLSX.utils.sheet_to_json(ws);
      setdata(datas)
    };

    if (rABS) {
      reader.readAsBinaryString(file);
    } else {
      reader.readAsArrayBuffer(file);
    }
  }

  return (
    <div>
      <label htmlFor="file">Upload an excel to Process Triggers</label>
      <br />
      <input
        type="file"
        className="form-control"
        id="file"
        onChange={handleChange}
        accept=".xls,.xlsx"
      />
      <br />
      <input
        type="submit"
        value="Process Triggers"
        onClick={handleFile}
      />
      <br />
      {data && JSON.stringify(data)}
    </div>
  );
}

export default App;

Output:-