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中文網其他相關文章！