react实现excel下载

使用 xlsx 库实现 Excel 下载

安装 xlsx 库，这是一个流行的 JavaScript 库，用于处理 Excel 文件。

npm install xlsx

创建一个函数生成 Excel 文件并触发下载。

import * as XLSX from 'xlsx';

const downloadExcel = (data, fileName) => {
  const ws = XLSX.utils.json_to_sheet(data);
  const wb = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
  XLSX.writeFile(wb, `${fileName}.xlsx`);
};

调用示例：

const data = [
  { Name: "John", Age: 30 },
  { Name: "Jane", Age: 25 }
];

<button onClick={() => downloadExcel(data, "users")}>Download Excel</button>

使用 file-saver 和 xlsx 实现下载

如果需要更灵活的下载控制，可以结合 file-saver 库。

安装依赖：

npm install xlsx file-saver

实现代码：

import * as XLSX from 'xlsx';
import { saveAs } from 'file-saver';

const downloadExcel = (data, fileName) => {
  const ws = XLSX.utils.json_to_sheet(data);
  const wb = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
  const excelBuffer = XLSX.write(wb, { bookType: 'xlsx', type: 'array' });
  const blob = new Blob([excelBuffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
  saveAs(blob, `${fileName}.xlsx`);
};

从 API 获取数据并下载

如果数据需要从 API 获取，可以在获取数据后调用下载函数。

const fetchAndDownload = async () => {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  downloadExcel(data, "api_data");
};

<button onClick={fetchAndDownload}>Download from API</button>

自定义 Excel 样式和格式

xlsx 库支持自定义样式和格式，可以通过设置单元格属性实现。

const ws = XLSX.utils.json_to_sheet(data);
ws['A1'].s = { font: { bold: true }, fill: { fgColor: { rgb: "FFFFAA00" } } };

使用 react-excel-renderer 库

如果需要更简单的集成，可以使用 react-excel-renderer。

安装依赖：

npm install react-excel-renderer

实现代码：

import { ExcelRenderer } from 'react-excel-renderer';

const downloadExcel = (data, fileName) => {
  ExcelRenderer.exportToExcel(data, fileName);
};

注意事项

确保数据格式正确，避免包含循环引用或不可序列化的对象。文件名应避免特殊字符，确保跨浏览器兼容性。对于大量数据，考虑分块处理以避免性能问题。