Excel js React JS

Excel digunakan secara meluas untuk pelbagai laporan data. Dalam aplikasi ReactJS, kita boleh menggunakan perpustakaan exceljs untuk mencipta fail Excel secara dinamik. Artikel ini akan membimbing anda melalui pelaksanaan exceljs dalam apl React untuk membuat dan memuat turun laporan Excel.

Persediaan dan Pemasangan

Mula-mula, pasang pustaka exceljs. Buka terminal dan jalankan arahan berikut dalam direktori projek React anda:

npm install exceljs file-saver

Pustaka exceljs akan digunakan untuk mencipta dan memanipulasi buku kerja (fail Excel), manakala penjimat fail akan mengendalikan muat turun fail dalam penyemak imbas.

Langkah 1: Buat Fungsi Eksport Excel
Buat fail komponen baharu, seperti ExportToExcel.js. Dalam komponen ini, kami akan mencipta fungsi exportExcel untuk mengendalikan penciptaan buku kerja dan lembaran kerja, serta menyimpan fail Excel yang dijana.

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;

Langkah 2: Gunakan Komponen ExportToExcel
Selepas mencipta komponen ExportToExcel, gunakannya dalam fail yang berkaitan, seperti App.js. Pastikan anda mempunyai data sedia untuk dieksport ke 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;

Menggunakan exceljs, menjana laporan Excel dalam ReactJS menjadi mudah dan fleksibel. Panduan ini menunjukkan cara membuat laporan Excel dengan pengepala, sisipan data dan penggayaan pengepala asas.

Atas ialah kandungan terperinci Excel js React JS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!