Forem

Mohammed Nadeem Shareef
Mohammed Nadeem Shareef

Posted on

16 2

Convert Excel to JSON in ReactJS in just 2 steps

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
Enter fullscreen mode Exit fullscreen mode

Create a basic structure for file upload


<form>
    <label htmlFor="upload">Upload File</label>
    <input
        type="file"
        name="upload"
        id="upload"
        onChange={readUploadFile}
    />
</form>

Enter fullscreen mode Exit fullscreen mode

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]);
    }
}

Enter fullscreen mode Exit fullscreen mode

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
Linkedin
My other Blogs

Top comments (10)

Collapse
 
deciduously profile image
Ben Lovy •

This doesn't seem to require React, right?

Collapse
 
shareef profile image
Mohammed Nadeem Shareef • • Edited

Yes, it doesn't

Collapse
 
prosperomage profile image
prosperomage •

how is xlsx imported in react

Collapse
 
lln profile image
Lina •

You may try to use import * as xlsx from 'xlsx';

Collapse
 
eperaza profile image
eperaza •

and how do you use this on the rest of the code??

Collapse
 
zaki_dz profile image
Zaki_Dz •

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)

Collapse
 
vijay972 profile image
vijay972 •

How to convert multiple excel to Json?

Collapse
 
arunwarrier123 profile image
ArunWarrier123 •

if you have multple files in your input. will something like mapping or looping all the e.target.files work? do check

Collapse
 
jackhack profile image
Hakob Sukiasyan •

Whats the limitation of file ? I mean how many rows, or whats the biggest size of uploading file ?

Collapse
 
zaki_dz profile image
Zaki_Dz •

every browser or app technology have a limit and it depends
for example chrome i think it's 256mb