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