Export json to excel reactjs

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": "//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.

asked Jan 26 at 22:52

2

Use xlsx third-party library.

npm install xlsx

Using Library:

import 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 ]

this.downloadExcel[data]}>
    Download As Excel

answered Jan 27 at 0:04

AnmolAnmol

3543 silver badges5 bronze badges

3

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 at 23:35

1.0.4 • Public • Published a year ago

• Readme
• Explore BETA
• 0 Dependencies
• 0 Dependents
• 8 Versions

npm install react-json-to-excel --save

Add the script file in index.html

import { JsonToExcel } from "react-json-to-excel";

class SmapleComponent extends Component {
  render[] {
    return [
      
    ];
  }
}

import { JsonToExcel } from "react-json-to-excel";
const samplejson1 = [
  { label: "C" },
  { label: "Java" },
  { label: "Go" },
  { label: "Javascript" },
  { label: "HTML" },
  { label: "CSS" },
  { label: "REACT" },
  { label: "JQUERY" }
];

const samplejson2 = [
  { name: "name01" , age:"20",sex:"M" },
  { name: "name02" , age:"22",sex:"F" }
  { name: "name03" , age:"20",sex:"M" }
];

class SmapleComponent2 extends Component {
  render[] {
    return [
      
       
    ];
  }
}

How do I export JSON data to Excel in react?

How do I pull JSON into Excel?

How do I export from react to excel?

How do I export JSON data to Excel in node JS?