Excel js React JS

Excel wird häufig für verschiedene Datenberichte verwendet. In einer ReactJS-Anwendung können wir die ExcelJS-Bibliothek verwenden, um Excel-Dateien dynamisch zu erstellen. Dieser Artikel führt Sie durch die Implementierung von ExcelJS in einer React-App, um Excel-Berichte zu erstellen und herunterzuladen.

Einrichtung und Installation

Installieren Sie zunächst die ExcelJS-Bibliothek. Öffnen Sie das Terminal und führen Sie den folgenden Befehl in Ihrem React-Projektverzeichnis aus:

npm install exceljs file-saver

Die ExcelJS-Bibliothek wird zum Erstellen und Bearbeiten von Arbeitsmappen (Excel-Dateien) verwendet, während File-Saver das Herunterladen von Dateien im Browser übernimmt.

Schritt 1: Erstellen Sie eine Export-Excel-Funktion
Erstellen Sie eine neue Komponentendatei, z. B. ExportToExcel.js. In dieser Komponente erstellen wir eine exportExcel-Funktion, um die Erstellung von Arbeitsmappen und Arbeitsblättern sowie das Speichern der generierten Excel-Datei zu verwalten.

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;

Schritt 2: Verwenden Sie die ExportToExcel-Komponente
Nachdem Sie die ExportToExcel-Komponente erstellt haben, verwenden Sie sie in einer relevanten Datei, z. B. App.js. Stellen Sie sicher, dass Sie die Daten für den Export nach Excel bereit haben.

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;

Mit ExcelJS wird das Erstellen von Excel-Berichten in ReactJS einfach und flexibel. In dieser Anleitung wird gezeigt, wie Sie einen Excel-Bericht mit Kopfzeilen, Dateneinfügung und grundlegendem Kopfzeilenstil erstellen.

Das obige ist der detaillierte Inhalt vonExcel js React JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!