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);
};注意事项
确保数据格式正确，避免包含循环引用或不可序列化的对象。文件名应避免特殊字符，确保跨浏览器兼容性。对于大量数据，考虑分块处理以避免性能问题。
