How To Create Excel File In React Js

The creating of an excel file in React is demonstrated in this post. We start from scratch and build a React application to read the excel file.

Get Started:

Step 1:
Set up a new React Application

npx create-react-app create-excel

Change your directory…

cd create-excel

And run your project to check its successfully created or not?

npm start

Step 2:
Install ‘xlsx’ package in your application.

npm i xlsx

Then import it into your App.js file.

import * as XLSX from "xlsx";

Step 3:
Add the following HTML for get the file.

<button onClick={() => generateExcelFile()}>genrateExcelFile</button>

Step 4:
Add the method for handle button event.

const generateExcelFile = () => {
       const ws = XLSX.utils.json_to_sheet(sampleData);
       const wb = XLSX.utils.book_new();
       XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
       XLSX.writeFile(wb, 'sample.xlsx');
   }

Now, run your project, upload an excel file and check the output in the console.