Как экспортировать данные сетки в файлы Excel, CSV и PDF (React) - PullRequest
Новая
       18

Как экспортировать данные сетки в файлы Excel, CSV и PDF (React)

2 голосов
/ 23 апреля 2019

Я создаю приложение в React и .NET Core API . Я создал мою сетку (для этого не используется пакет npm).

Необходима функциональность для экспорта данных сетки в формат pdf, excel и csv . Как я могу добиться этого без каких-либо пакетов или библиотеки npm?

Я получу данные (в виде списка) на сервере форм (.NET core API) при нажатии кнопки загрузки.

Я пробовал некоторые пакеты npm, такие как Reaction-CSV, downloadjs , но они не работают должным образом.

Мои данные в массиве объектов формата: 

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

Когда я передаю эти данные в downloadjs , файл Excel, содержащий содержимое [Object object] и созданный файл PDF, поврежден.

Для реагировать-csv генерирует неизвестный файл, например b0d7cfd9-f4ca-4792-bfad-2b3198c63a33

1 Ответ

0 голосов
/ 23 апреля 2019

Предполагая, что данные - это сетка, которую вы хотите экспортировать

В случае 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);

если данные сложные, вы можете использовать PapaParse 

const csvContent = Papa.unparse(data);

В случае Xls:

использовать SheetJS библиотека

пример: 

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`);

В случае pdf:

вам нужно создать html сетки

, тогда вы можете использовать библиотеку jsPDF :

Создать PDF из HTML в div с использованием Javascript

...