How can I export a JSON object to Excel using Nextjs/React?

Question

I have an endpoint that retrieves a json object like the following:

"data": [
{
"id": 1,
"temaIndicador": "Indian",
"codigo": "001",
"observaciones": "Interactions Specialist tertiary Regional Tennessee",
"activo": "SI",
"urlImagen": "http://placeimg.com/640/480",
"color": "cyan",
"createdAt": "2022-01-26T18:48:36.002Z"
]

And I want to implement a button that will allow the user to export the data to multiple formats, including Excel (.xlsx) but I don't really know were to start. I've already seen libraries that realize this, but I don't feel comfortable because they usually have less than 1.5k downloads per week.

My purpose is to export an Excel document with a simple table where the headers are going to be the attributes of the objects.

You can start by export the json as a csv file (comma seperated, or semicolumn seperated). The first line will be the names of the columns. — Chris P
– Chris P, Commented Jan 26, 2022 at 22:55
json2csv has 774,337 weekly downloads. exceljs has 454,689 downloads this week. excel-export is 6 years old, but still had 37,945 weekly downloads. — ray
– ray, Commented Jan 26, 2022 at 22:58

Anmol · Accepted Answer · 2023-01-07 04:38:29Z

28

Use xlsx third-party library.

npm install xlsx

Using Library: (use one of the following lines to import) -

import XLSX from "xlsx";

or

import * as XLSX from 'xlsx';

Download function trigger at button click(pass data as argument):

downloadExcel = (data) => {
    const worksheet = XLSX.utils.json_to_sheet(data);
    const workbook = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");
    //let buffer = XLSX.write(workbook, { bookType: "xlsx", type: "buffer" });
    //XLSX.write(workbook, { bookType: "xlsx", type: "binary" });
    XLSX.writeFile(workbook, "DataSheet.xlsx");
  };

Download Button: (function call: you should modify it as per your requirement, below one is React Class Component implementation, that's why I used this )

<button onClick={()=>this.downloadExcel(data)}>
    Download As Excel
</button>

edited Jan 7, 2023 at 4:38

answered Jan 27, 2022 at 0:04

Anmol

7099 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Miguel V Over a year ago

Thank you so much! This was exactly what I needed

Kimi Raikkonen 9790 Over a year ago

It shows the following error "Attempted import error: 'xlsx' does not contain a default export (imported as 'XLSX')"

Gagandeep Over a year ago

import * as XLSX from 'xlsx';

o-az Over a year ago

note that xlsx on npm is not being updated. Last version was published over a year ago: npmjs.com/package/xlsx?activeTab=versions. The official docs recommends installing it by installing tarball directly: docs.sheetjs.com/docs/getting-started/installation/nodejs/…

Manuel Contreras · Accepted Answer · 2022-05-04 23:35:02Z

14

Based on the accepted answer, in case someone is getting the "Attempted import error: 'xlsx' does not contain a default export (imported as 'XLSX')" error, try importing using the following:

import * as XLSX from 'xlsx';

Hope it helps.

answered May 4, 2022 at 23:35

Manuel Contreras

1411 silver badge3 bronze badges

Collectives™ on Stack Overflow

How can I export a JSON object to Excel using Nextjs/React?

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related