How to export grid data to excel, csv and pdf files (React)

Question

I am creating an application in React and .NET Core API. I have created mine grid (not using any npm package for this).

There is functionality required to export grid data to pdf, excel and csv format. How can i achieve this without any npm package or library?

I will get data(in List) form server (.NET core API) on download click button.

I have tried some npm packages like react-csv, downloadjs but they are not working as expected.

Mine data in array of objects format:

[{firstColumn: "1", secondCoulmn: "4", thirdColumn: "test"},
 {firstColumn: "2", secondCoulmn: "3", thirdColumn: "test2"}]

When i am passing this data in downloadjs then excel file having [Object object] content and PDF file generated is corrupted.

For react-csv it is generating unknown file like b0d7cfd9-f4ca-4792-bfad-2b3198c63a33

Tell us what specific problems you're having with react-csv and/or downloadjs so we can help you solve them. Include your code, please. — stone
– stone, Commented Apr 23, 2019 at 5:41
csv is possible without any library but in case of xls and pdf you have to use the libraries — Nihal Saxena
– Nihal Saxena, Commented Apr 23, 2019 at 5:41
sure @SandeepRasgotra i have added a answer please check weather it works for you — Nihal Saxena
– Nihal Saxena, Commented Apr 23, 2019 at 6:04

Nihal Saxena · Accepted Answer · 2019-04-23 06:23:37Z

2

Assuming data is grid you want to export

In case of csv :

const csvContent = data.map(d=>d.join(",")).join("\n")
const element = document.createElement('a');
element.setAttribute(
  'href',
  `data:text/plain;charset=utf-8, ${encodeURIComponent(csvContent)}`,
);
element.setAttribute('download', `${fileName}.csv`);
element.style.display = 'none';
document.body.appendChild(element);
element.click();
document.body.removeChild(element);

if data is complex you may use PapaParse

const csvContent = Papa.unparse(data);

In case of Xls :

use SheetJS library

example :

const sheet = XLSX.utils.json_to_sheet(data);
const workbook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(workbook, sheet, 'Sheet 1');
XLSX.writeFile(workbook, `${fileName}.xls`);

In case of pdf:

you need to create the html of grid

then you can use the jsPDF library:

Generate pdf from HTML in div using Javascript

edited Apr 23, 2019 at 6:23

answered Apr 23, 2019 at 6:03

Nihal Saxena

1,0063 gold badges12 silver badges27 bronze badges

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

5 Comments

Sandeep Rasgotra Over a year ago

it worked for Excel and CSV and it is really helpful, but i am still searching for pdf solution.

Nihal Saxena Over a year ago

what problem are you facing in creating pdf ?

Sandeep Rasgotra Over a year ago

In this solution for pdf we can converthtml to pdf. In mine scenario i need to export all data to pdf which is currently not in html because i amshowning limited records on grid like 10 , so in this scenario this is not feasible solution.

Nihal Saxena Over a year ago

In that case you have to simply create PDF with multiple pages

Nihal Saxena Over a year ago

if you can share the code snippet i can show you how to do it

Collectives™ on Stack Overflow

How to export grid data to excel, csv and pdf files (React)

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related