DEV Community

Cover image for How To Export Data To Excel From Api Using ReactJS (incl. Custom Headers)

How To Export Data To Excel From Api Using ReactJS (incl. Custom Headers)

Jasur Kurbanov on May 20, 2022

In my previous post, about exporting data to Excel from api using React, there were comments like how to add custom header and style to the sheet!...
Collapse
 
andrewbaisden profile image
Andrew Baisden

Cool guide really easy to follow thanks for sharing.

Collapse
 
jasurkurbanov profile image
Jasur Kurbanov

You're welcome!

Collapse
 
andrewbaisden profile image
Andrew Baisden

Sure no problem hope to see more of this content.

Collapse
 
isaachatilima profile image
Isaac Hatilima

Great tutorial, I have one question. When I change SheetNames: ["data"] to SheetNames: ["Sheet 1"] or anything the data does not export, can I not change the sheet name?

Collapse
 
jasurkurbanov profile image
Jasur Kurbanov

what do you want to achieve bro ?

Collapse
 
isaachatilima profile image
Isaac Hatilima

I want the sheet/page in the export to have a custom name and not data.

Thread Thread
 
jasurkurbanov profile image
Jasur Kurbanov

do you need assistance? or you found how to do it ?

Thread Thread
 
isaachatilima profile image
Isaac Hatilima

I managed to make it work. I needed to add link.fillStyle = 'white'; in the click event function.

Thread Thread
 
jochercoles profile image
jochercoles

Hi Isaac, I have the same problem, can you explain with more detail how to you done to change the sheet name from "data" to anything?
Where you inserted linkfillStyle = 'white';
Thank you very much.
Javier.

Collapse
 
isidro_calderon profile image
Isidro Calderon A.

thanks for sharing

Collapse
 
hunghvu profile image
Hung Vu

There is one big catch though, you must define cell format yourself.

Let's say you already had an Excel sheet (with styling), and want to use that sheet to store data. An approach is to open your existing sheet, copy all existing cell information, write API data, then save to a new file (in-place replacement is not available AFAIK). However, xlsx will nullify all existing style of the sheet so you must manually define cell style upon exporting.

Apparently, this feature is only available in the Pro version, so it is a huge blockage IMO.

Collapse
 
paratron profile image
Christian Engel • Edited

Okay, wait a second - did I get this correctly: I load JSON data from your server and turn that into an excel file INSIDE YOUR BROWSER using massive amounts of client side javascript.

Why?

Instead of requesting JSON from the server, why not requesting the excel file directly from the server (create it serverside)?

That would result in a much smaller client side app and works even in older browsers.

Or did I miss any reason to do that stuff in the browser?

Collapse
 
hunghvu profile image
Hung Vu

Server-side export is a different use case, and is not always a solution. For example, if you want to create a reusable table component with XLSX exporting feature, then client side is a way to do so. Certainly, information in the table is from an API, and at least I would not want to have my table feature being disabled due to internet connection issue.

The article is an introduction to xlsx feature, so either examples work.

Collapse
 
paratron profile image
Christian Engel

You should definitely mention just HOW BIG the xlsx module is. Its over 400kb of minified javascript. Thats nothing you should casually load alongside your app just because someone might want to save an excel file.

And if you want to create a React table component, it should not be built with excel export included in the component. That logic definitely belongs someplace else.

There may be a rare case of when there is really no other way than generating the excel file in the browser - but the way your article is written most people get the idea that there is no downside at all to that approach. "Just install those three modules" sounds simple but in the background you are getting truckloads of additional code into your application. Your article seems to be aimed at beginners.

So big red warning: you would normally NOT want to do it this way, but there MAY be reasons to do so.

Thread Thread
 
hunghvu profile image
Hung Vu

I'm not the author by the way, just a passerby.

I agree it has an impact on performance and should have more consideration in a real product implementation, but again, that was not the point of this article (at least in the way I interpret it).

The table example was simply based on MUI data grid, which was on top of my head at that time.

Collapse
 
shiv_5 profile image
Shivendra.tiwari4u@gmail.com

How can I show values into rows rather than showing it in column

Collapse
 
jasurkurbanov profile image
Jasur Kurbanov

Nice question, I will research on this than answer to you

Collapse
 
shiv_5 profile image
Shivendra.tiwari4u@gmail.com

Sure,Thank you

Collapse
 
kadam profile image
Mayur

@jasurkurbanov
I need a help and its urgent.
I need to set width property for columns that get displayed on excel sheet and also add some colors .
How do i do that ?????

Collapse
 
jasurkurbanov profile image
Jasur Kurbanov

@kadam you can do it with xlsx pro version sheetjs.com/pro. But there are other libraries which can help you npmjs.com/package/xlsx-color