Question

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

必须具有将网格数据导出为pdf，excel和csv格式的功能。没有任何npm包或库，如何实现？

点击下载按钮，我将从服务器（.NET Core API）中获取数据（在列表中）。

我尝试了一些npm软件包，例如 react-csv，downloadjs ，但是它们无法按预期工作。

以对象数组格式开采数据：

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

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

对于 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

如何将网格数据导出到Excel，CSV和pdf文件（反应）

1 个答案: