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, Apr 23 '19 at 05:41
csv is possible without any library but in case of xls and pdf you have to use the libraries — Nihal Saxena, Apr 23 '19 at 05:41
sure @SandeepRasgotra i have added a answer please check weather it works for you — Nihal Saxena, Apr 23 '19 at 06:04
I meant post your code that attempts to solve the problem. Not the data. On StackOverflow we expect question askers to have tried it themselves first. — stone, May 02 '19 at 04:54

Nihal Saxena · Answer 1 · 2019-04-23T06:23:37.423

0

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 '19 at 06:23

answered Apr 23 '19 at 06:03

Nihal Saxena

948
3
11
24

it worked for Excel and CSV and it is really helpful, but i am still searching for pdf solution. – Sandeep Rasgotra Apr 24 '19 at 05:34
what problem are you facing in creating pdf ? – Nihal Saxena Apr 24 '19 at 05:42
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. – Sandeep Rasgotra Apr 24 '19 at 10:41
In that case you have to simply create PDF with multiple pages – Nihal Saxena Apr 24 '19 at 16:05
if you can share the code snippet i can show you how to do it – Nihal Saxena Apr 25 '19 at 02:08

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

1 Answers1