REACT - Export Data to XLSX Excel Sheets with SheetJS

hello everybody welcome today we're going to see how to export json data from your react app into an excel sheet so let's jump right on to it so here i have a simple page which displays a bunch of data let me quickly show you how it's built so i have a simple excel export exhaust jsx component here what it does is on page load it basically gets the data from a service i have a service that marks data and just gives us a bunch of json objects and here we just looked through the data and printed it okay so now let's see how we can export this data into an excel sheet okay first i'm gonna write a a simple button that's gonna trigger an event so let's write a row and we're gonna have a button and this button is gonna say export and it's going to have a click event on click i'm going to call it handle on export let's write the definition for this function it's a simple function no parameters okay so that's our export function let's console.log sheetdata for now and i'm gonna hide this one okay so now let's refresh and when i click on it we get our data so the data we have looks like this it's a basically an object it's an array of objects uh with a couple of properties color id name and price so now let's see how we can export this so here we're going to have to import xlsx if you haven't installed it already it's very simple all you have to do is run npm install xlsx and it should install it for you let's hide this section okay so once we come here okay now let's start exporting so first we're going to declare a workbook it's going to be xlsx dot utils dot book underscore new that's one the second one we know we're gonna need a sheet we're gonna say xlsx.utils.json to sheet so this function basically converts a json object into a sheet so now let's uh give the data which is our sheet data okay and finally we're going to call xlsx.utils append sheet the first parameter is a workbook the second parameter is a worksheet the third parameter is the sheet name so let's call it myfile dot uh no the sheet name is going to be sheet one let's call it my sheet one and then finally we're gonna write write file we're gonna the first one is the workbook yes and then our file name so my excel dot xlsx okay now let's save let's refresh let's export let's save the file let's open it and there we have it we have our excel sheet with the specified name and also we have the correct tab name wonderful okay in our first scenario we exported data that's in json object form like this but what if our objects are an array of arrays like this so let's see how to do that here we have a second table i call this array sheet we're going to add an export button the same way we did to the previous sheet and we're going to export the array of arrays into an excel so let's go back to our code let's go to export excel i'm just going to copy the previous button we had let's copy the same button and i'm going to add it right here okay let's remove this extra colon okay on let's rename this to our export so let's uh actually duplicate this entire function and call this on array export let's save it okay we actually have it there okay let's uh cut this paste it here okay that's cool so the only major difference we have to change is in this function is right here so instead of json to shade we're gonna write aoa rifles to sheet let's save let's refresh export okay oh we're passing the wrong data sheet array data okay refresh export let's save and let's open the file and there we go we have our data awesome thank you so much for watching please like share and subscribe if you have any questions please leave in the comment section i'll get back to you as soon as possible take care

Channel: I See Sharp

Views: 40,289

Keywords: reactjs, react, sheetjs, readexcelfile, excel js, html, parse excel, exporttoexcel

Id: F7dQLO5Jhp4

Length: 6min 20sec (380 seconds)

Published: Wed Mar 02 2022