Post
Ask Question

How To Read Excel File In Next JS Application

Introduction

Reading the Excel Sheet in Next JS through the xlsx. 

Preconditions

  • Javascript
  • Basic knowledge of Next JS
  • Node.js
  • V.S. Code,Visual Studio

We cover the below things,

  • Create Next application
  • Installation of xlsx
  • How to Read Excel Sheet in Next js using xlsx.

Step 1

Run the following command to create Next JS application.

npx create-next-app nextjsappreadexcel
cd nextjsappreadexcel
npm run dev

Step 2

Run the below command for installing xlsx.

npm i xlsx

Create the files according to the below image.

How To Read Excell File In Next JS Application

Step 3

Add the below code in the index.js

import Head from 'next/head'
import Image from 'next/image'
import { Inter } from 'next/font/google'
import styles from '@/styles/Home.module.css'
import MyNextJsExcelSheet from './MyAppNextJsExcelSheet'

const inter = Inter({ subsets: ['latin'] })
export default function Home() {
  return (
    <>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.ico" />
        <link rel="stylesheet" href="https://unpkg.com/primeflex@^3/primeflex.css" />
        <link rel="stylesheet" href="https://unpkg.com/primeflex/themes/saga-blue.css" />
        <link rel="stylesheet" href="https://unpkg.com/primeflex/themes/arya-blue.css" />
        <link rel="stylesheet" href="https://unpkg.com/primeflex/themes/vela-blue.css" />
        <link
          rel="stylesheet"
          href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
          integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
          crossorigin="anonymous"
        />
        <script src="https://cdn.jsdelivr.net/npm/react/umd/react.production.min.js" crossorigin></script>
        <script
          src="https://cdn.jsdelivr.net/npm/react-dom/umd/react-dom.production.min.js"
          crossorigin></script>
        <script
          src="https://cdn.jsdelivr.net/npm/react-bootstrap@next/dist/react-bootstrap.min.js"
          crossorigin></script>
      </Head>
      <main className={styles.main}>
        <div className={styles.center}>
          <Image
            className={styles.logo}
            src="/next.svg"
            alt="Next.js Logo"
            width={180}
            height={37}
            priority
          />
          <div className={styles.thirteen}>
            <Image
              src="/thirteen.svg"
              alt="13"
              width={40}
              height={31}
              priority
            />
          </div>
        </div>
        <div className={styles.grid}>
          <MyNextJsExcelSheet />
        </div>
      </main>
    </>
  )
}

Step 4

Add the below code in MyAppNextJsExcelSheet.js

import React, { useState } from "react";
import * as XLSX from "xlsx";
import Table from 'react-bootstrap/Table';
import 'bootstrap/dist/css/bootstrap.min.css';
import { Col, Form, Row } from 'react-bootstrap';

export default function MyNextJsExcelSheet() {

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);
            console.log(data);
            resolve(data);
        };
        fileReader.onerror = (error) => {
            reject(error);
        };
    });
    promise.then((d) => {
        setItems(d);
    });
  };
  return (
    <div>
      <input
        type="file"
        onChange={(e) => {
          const file = e.target.files[0];
          readExcel(file);
        }}
      />
      <br></br>
      <br></br>
      <br></br>

      <Row>
        <Col lg={12}>
          <h3>The Data of The Uploaded Excel Sheet</h3>
          <Table striped bordered hover variant="warning">
            <thead>
              <tr>
                <th>FirstName</th>
                <th>LastName</th>
                <th>Phone</th>
                <th>UserName</th>
                <th>Email Id</th>
                <th>Password</th>
                <th>Test Date</th>
                <th>Comment</th>
              </tr>
            </thead>
            <tbody>
              {items.map((datas, index) =>
                <tr key={index}>

                  <td>{datas.FirstName}</td>
                  <td>{datas.LastName}</td>
                  <td>{datas.Phone}</td>
                  <td>{datas.UserName}</td>
                  <td>{datas.emailid}</td>
                  <td>{datas.Password}</td>
                  <td>{datas.testdate}</td>
                  <td>{datas.Comment}</td>

                </tr>
              )}
            </tbody>
          </Table>
        </Col>
      </Row>
    </div>
  );
}

Step 5

Create the Home.module.css and globals.css file. You can get the code from the attached source code.

Step 6

Add the following code in package.json.

{
    "name": "nextjsappreadexcel",
    "version": "0.1.0",
    "private": true,
    "scripts": {
        "dev": "next dev",
        "build": "next build",
        "start": "next start",
        "lint": "next lint"
    },
    "dependencies": {
        "bootstrap": "^5.2.3",
        "next": "13.2.4",
        "react": "18.2.0",
        "react-bootstrap": "^2.7.2",
        "react-dom": "18.2.0",
        "xlsx": "^0.18.5"
    }
}

Step 7

Run the following commands.

npm i
npm run dev

How to read Excell file in Next Js application

Summary

In this article, we learned how to create a Next JS application and learn how to read an excel sheet in the Next JS application.


Similar Articles