Excel js 反应 JS

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中文网其他相关文章！