Fetch Data from Excel File in React JS | React XLSX

Fetch data from an Excel file in a React JS application. We will install required dependencies. Import the dependencies. Read the Excel file. Parse the data and save it in a state. Display the data from the state in the component.

The task requires xlsx library for parsing the Excel file. Install the dependencies using npm or yarn. Open terminal in project and use command npm install xlsx. After dependency is installed. Import the dependencies like useState hook and xlsx. Import all the exported members from the 'xlsx' library and make them available as an object 'XLSX'. Define a state called data and a function setData to update the state. Initialize this state with an initial value of an empty array. Create an input element of type "file" that allows user to choose an excel file from local file system. This file field will trigger the handleFileUpload function to process the file when a new file is selected. Create a function to read and parse the Excel file.

HandleFileUpload takes an event object e as its argument. This event object is automatically passed by the browser when the onChange event is triggered on the file input element. Create a new instance of the FileReader class. It provides methods to read the content of provided file. The readAsBinaryString method is called on the reader object to start reading the content of the uploaded file.

The read function from the xlsx library is used to parse the 'binary string data' and create a workbook object representing the Excel file. The first sheet's name is being extracted from the workbook object by accessing the SheetNames array. If you need to fetch data from different sheet, you can change the number here. The first sheet's actual data is being obtained from the workbook object by using the extracted sheet name as the key.

The sheet to json function is used to convert the first sheet's data into a JSON object. This JSON object is an array of row objects, with each object representing a row in the sheet. Call the setData function to update the state variable data with the parsed JSON data. Now we have the data in state.

Apply a check that checks if data is not empty. Create table adn use map method to get the keys and values separately to display data from excel file. Now, when you upload an Excel file, the data will be displayed in a table. This is how we can display data from an Excel file in React JS.

Get the Code:

- Fetch Data from CSV File in React JS | React CSV
- Fetch Data from JSON File in React JS | React JSON [ UPDATED ]
- 7 Ways to use Images in React JS
- Easy Way to use Images in React JS | No Import | No Require
- Require Image Not Working in React JS
- Multiple Images in One Import
- Multiple Sets of Images from One Import in React JS
- Display Records or Data from JSON File in React JS
- Default Map is not a Function in React JS
- Async Await Fetch in React JS
- ReactJS Playground

Our tutorials help you to improve your career growth, perform better in your job and make money online as a freelancer. Learn the skills to build and design professional websites, and create dynamic and interactive web applications using JavaScript, or WordPress. Our tutorials are tailored to help beginners and professionals alike. Whether you're just starting in the field or you're looking to expand your knowledge, we've got something for you. Join us on this journey to becoming a skilled web developer. Subscribe to our channel and let's get started!

Thank You!
👍 LIKE VIDEO
👊 SUBSCRIBE
🔔 PRESS BELL ICON
✍️ COMMENT

#react #reactjs #js #WebStylePress #javascript #xlsx #xls #sheets #excel

[webstylepress]

If you want to fetch single column from excel file, here is the tutorial

[kevyyar]

What if there is a complex excel structure? I'm this example the headers are on the first row. But what if there some headers/titles in other parts of the excel?

[mocambiquemaputomatola]

Hello, can you help me? I intend to develop an academic management system using Next.js 14, and I want to know how I can update students' grades using an Excel file that contains the grades for all assessments and the corresponding student numbers for each grade. Considering that each student accesses the system using their student number as a username and a password to access the student area, and all information has to be stored in the PostgreSQL database management system, I have a question: can I use PostgreSQL from Vercel or Supabase?

[robin]

I am getting error as : [eslint]
src\App.1.js
Line 12:23: Parsing error: Unexpected token (12:23) even though all syntax is correct :( anyone can help pls ?

[duncankioi]

Hello, And If you only want to access data from only one column...How do you do that?