Excel 广泛用于各种数据报告。在ReactJS应用程序中，我们可以使用exceljs库动态创建Excel文件。本文将指导您在 React 应用程序中实现 exceljs 以创建和下载 Excel 报告。
设置和安装
首先，安装exceljs库。打开终端并在 React 项目目录中运行以下命令：
npm install exceljs file-saver
exceljs 库将用于创建和操作工作簿（Excel 文件），而 file-saver 将处理浏览器中的文件下载。
第 1 步：创建导出 Excel 函数
创建一个新的组件文件，例如 ExportToExcel.js。在此组件中，我们将创建一个exportExcel函数来处理工作簿和工作表的创建，以及保存生成的Excel文件。
import React from 'react';
import ExcelJS from 'exceljs';
import { saveAs } from 'file-saver';
const ExportToExcel = ({ data, fileName }) => {
const exportExcel = async () => {
// 1. Create a new workbook
const workbook = new ExcelJS.Workbook();
const worksheet = workbook.addWorksheet('Data Report');
// 2. Define the table headers
worksheet.columns = [
{ header: 'ID', key: 'id', width: 10 },
{ header: 'Name', key: 'name', width: 30 },
{ header: 'Email', key: 'email', width: 30 },
{ header: 'Join Date', key: 'joinDate', width: 20 },
];
// 3. Insert data into the worksheet
data.forEach((item) => {
worksheet.addRow({
id: item.id,
name: item.name,
email: item.email,
joinDate: item.joinDate,
});
});
// 4. Style the header
worksheet.getRow(1).eachCell((cell) => {
cell.font = { bold: true };
cell.alignment = { horizontal: 'center' };
});
// 5. Save the workbook as an Excel file
const buffer = await workbook.xlsx.writeBuffer();
const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
saveAs(blob, `${fileName}.xlsx`);
};
return (
<button onClick={exportExcel}>Download Excel</button>
);
};
export default ExportToExcel;
第 2 步：使用 ExportToExcel 组件
创建 ExportToExcel 组件后，在相关文件（例如 App.js）中使用它。确保您已准备好数据以导出到 Excel。
import React from 'react';
import ExportToExcel from './ExportToExcel';
const App = () => {
const data = [
{ id: 1, name: 'Name 1', email: 'Name1@example.com', joinDate: '2023-01-15' },
{ id: 2, name: 'Name 2', email: 'Name2@example.com', joinDate: '2023-02-20' },
// Add more data as needed
];
return (
<div>
<h1>Export Data to Excel</h1>
<ExportToExcel data={data} fileName="Data_Report"/>
</div>
);
};
export default App;
使用exceljs，在ReactJS中生成Excel报告变得简单灵活。本指南演示如何创建包含标题、数据插入和基本标题样式的 Excel 报表。
以上是Excel js 反应 JS的详细内容。更多信息请关注PHP中文网其他相关文章！
