DEV Community

Mohammed Nadeem Shareef
Mohammed Nadeem Shareef

Posted on

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

Discussion (2)

Collapse
deciduously profile image
Ben Lovy

This doesn't seem to require React, right?

Collapse
shareef profile image
Mohammed Nadeem Shareef Author • Edited on

Yes, it doesn't