时间戳

首页 > 解决方案 > 如何将网格数据导出到 excel、csv 和 pdf 文件 (React)

reactjs - 如何将网格数据导出到 excel、csv 和 pdf 文件 (React)

问题描述

我正在React 和 .NET Core API中创建一个应用程序。我已经创建了我的网格（没有为此使用任何 npm 包）。

需要将网格数据导出为 pdf、excel 和 csv 格式的功能。在没有任何 npm 包或库的情况下如何实现这一点？

我将在下载单击按钮上获取数据（在列表中）表单服务器（.NET 核心 API）。

我尝试了一些 npm 包，如react-csv、downloadjs，但它们没有按预期工作。

以对象数组格式挖掘数据：

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

当我在downloadjs中传递此数据时，具有 [Object object] 内容和生成的 PDF 文件的 excel 文件已损坏。

对于react-csv，它正在生成未知文件，例如b0d7cfd9-f4ca-4792-bfad-2b3198c63a33

标签： reactjs.net-coreasp.net-core-webapi

解决方案

假设数据是您要导出的网格

如果是 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库：

使用Javascript从div中的HTML生成pdf

推荐阅读