Excel js React JS

Excel はさまざまなデータ レポートに広く使用されています。 ReactJS アプリケーションでは、exceljs ライブラリを使用して Excel ファイルを動的に作成できます。この記事では、React アプリに Exceljs を実装して Excel レポートを作成およびダウンロードする方法を説明します。

セットアップとインストール

まず、exceljs ライブラリをインストールします。ターミナルを開き、React プロジェクト ディレクトリで次のコマンドを実行します:

npm install exceljs file-saver

exceljs ライブラリはワークブック (Excel ファイル) の作成と操作に使用され、ファイルセーバーはブラウザでのファイルのダウンロードを処理します。

ステップ 1: Excel エクスポート関数を作成する
ExportToExcel.js などの新しいコンポーネント ファイルを作成します。このコンポーネントでは、ワークブックとワークシートの作成と、生成された Excel ファイルの保存を処理するためのexportExcel 関数を作成します。

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 中国語 Web サイトの他の関連記事を参照してください。