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:-