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

Question

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

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

我将在下载点击按钮时从服务器(.NET 核心 API)获取数据(在列表中)。

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

Mine data in array of objects format:

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

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

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

Answer 1

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

如果是 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图书馆:

Generate pdf from HTML in div using Javascript