How To Read Excel File Using React.js

In this article, we will learn how to read excel file using react-js.

− First of all, we have to create a react application.

− Install react XLSX package.

• npm install xlsx

Using the Component:

• Create functions that will handle the excel export.

const readExcel = (file) => {
        const promise = new Promise((resolve, reject) => {
            const fileReader = new FileReader();
            fileReader.readAsArrayBuffer(file);

            fileReader.onload = (e) => {
                const bufferArray = e.target.result;
                const wb = XLSX.read(bufferArray, { type: "buffer" });
                const wsname = wb.SheetNames[0];
                const ws = wb.Sheets[wsname];
                const data = XLSX.utils.sheet_to_json(ws);
                resolve(data);
            };

            fileReader.onerror = (error) => {
                reject(error);
            };
        });

        promise.then((event) => {
            setItems(event);
            console.log('event', event)
        });
    };

• Input type file :

<input type="file"
    onChange={(e) => {
    const file = e.target.files[0];
    readExcel(file);
    console.log('file', file)
   }}
 />

Now open your app.js file and add the code given below :

import React, { useState } from "react";
import * as XLSX from "xlsx";

export default function App() {
    const [items, setItems] = useState([]);

    const readExcel = (file) => {
        const promise = new Promise((resolve, reject) => {
            const fileReader = new FileReader();
            fileReader.readAsArrayBuffer(file);

            fileReader.onload = (e) => {
                const bufferArray = e.target.result;
                const wb = XLSX.read(bufferArray, { type: "buffer" });
                const wsname = wb.SheetNames[0];
                const ws = wb.Sheets[wsname];
                const data = XLSX.utils.sheet_to_json(ws);
                resolve(data);
            };

            fileReader.onerror = (error) => {
                reject(error);
            };
        });

        promise.then((event) => {
            setItems(event);
        });
    };

    return (
        <div className="main">
            <input type="file"
                onChange={(e) => {
                    const file = e.target.files[0];
                    readExcel(file);
                    console.log('file', file)
                }}
            />

            <table className="table">
                <thead>
                    <tr>
                        <th scope="col">Make</th>
                        <th scope="col">Model</th>
                        <th scope="col">Price</th>
                    </tr>
                </thead>
                <tbody>
                    {items.map((e, index) => (
                        <tr key={index}>
                            <th>{e.Make}</th>
                            <td>{e.Model}</td>
                            <td>{e.Price}</td>
                        </tr>
                    ))}
                </tbody>
            </table>
        </div>
    );
}

Output: