Excel js + React JS-js教程-PHP中文网

Excel js + React JS

花韻仙語

发布： 2024-11-11 14:33:27

转载

1038人浏览过

excel js + react js

excel广泛用于各种数据报告。在reactjs应用程序中，我们可以使用exceljs库动态创建excel文件。本文将指导您在 react 应用程序中实现 exceljs 以创建和下载 excel 报告。

设置和安装

首先，安装exceljs库。打开终端并在 react 项目目录中运行以下命令：

Js软键盘

查看详情

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 + React JS的详细内容，更多请关注php中文网其它相关文章！