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 files property of the event object e.target holds the list of files, and the first file is passed to the method. Once the file's content is read, the onload event is triggered, and the callback function is executed. Assign an event listener to the onload property of the reader object. This event listener is a callback function that is executed when the FileReader has successfully read the file's content. Pass the event object e, to the onload callback function, that contains result property. Result property holds the contents of the file as a binary string. This content is assigned to the data variable here.

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:
https://github.com/webstylepress/Fetc...

- Fetch Data from CSV File in React JS | React CSV
   • Fetch Data from CSV File in React JS ...  
- Fetch Data from JSON File in React JS | React JSON [ UPDATED ]
   • Fetch Data from JSON File in React JS...  
- 7 Ways to use Images in React JS
   • 7 Ways to Use Images in ReactJS | Rea...  
- Easy Way to use Images in React JS | No Import | No Require
   • Easy Way to Use Images in React | No ...  
- Require Image Not Working in React JS
   • Require Image Not Working in ReactJS ...  
- Multiple Images in One Import
   • Multiple Images in ONE IMPORT | React...  
- Multiple Sets of Images from One Import in React JS
   • Multiple Sets of Images from ONE IMPO...  
- Display Records or Data from JSON File in React JS
   • Display Records or Data From JSON Fil...  
- Default Map is not a Function in React JS
   • Default MAP is Not a Function | React...  
- Async Await Fetch in React JS
   • Multiple Ways of Async Await Fetch AP...  
- ReactJS Playground
   • 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

⚡Channel:    / @webstylepress  
⚡Website: https://www.webstylepress.com
⚡FaceBook:   / webstylepress  
⚡Twitter:   / webstylepress  
⚡GitHub: https://github.com/webstylepress
#react #reactjs #js #WebStylePress #javascript #xlsx #xls #sheets #excel