Hello Developers 🙌
Today we will see how to convert Excel to JSON
We will use xlsx package.
No more talking let's jump into the coding part.
Install xlsx package
npm i xlsx
Create a basic structure for file upload
<form>
<label htmlFor="upload">Upload File</label>
<input
type="file"
name="upload"
id="upload"
onChange={readUploadFile}
/>
</form>
Convert Excel file to JSON
const readUploadFile = (e) => {
e.preventDefault();
if (e.target.files) {
const reader = new FileReader();
reader.onload = (e) => {
const data = e.target.result;
const workbook = xlsx.read(data, { type: "array" });
const sheetName = workbook.SheetNames[0];
const worksheet = workbook.Sheets[sheetName];
const json = xlsx.utils.sheet_to_json(worksheet);
console.log(json);
};
reader.readAsArrayBuffer(e.target.files[0]);
}
}
Kaboom!🔥 in just two simple steps, you can convert Excel to JSON
HappyCoding
Closing here 👋👋👋
This is Shareef.
My recent project yourounotes
My Portfolio
Twitter ShareefBhai99
My other Blogs
Top comments (10)
This doesn't seem to require React, right?
Yes, it doesn't
how is xlsx imported in react
You may try to use
import * as xlsx from 'xlsx';and how do you use this on the rest of the code??
he consoled.log(json)
you can put that json into a variable (or a state in react), then use it in your code (for example map through it to use the data as you want)
How to convert multiple excel to Json?
if you have multple files in your input. will something like mapping or looping all the e.target.files work? do check
Whats the limitation of file ? I mean how many rows, or whats the biggest size of uploading file ?
every browser or app technology have a limit and it depends
for example chrome i think it's 256mb