Excel js Réagir JS-js tutoriel-php.cn

Excel js Réagir JS

Barbara Streisand

Libérer： 2024-11-16 12:57:03

original

685 Les gens l'ont consulté

Excel js React JS

Excel est largement utilisé pour divers rapports de données. Dans une application ReactJS, nous pouvons utiliser la bibliothèque exceljs pour créer dynamiquement des fichiers Excel. Cet article vous guidera dans la mise en œuvre d'Exceljs dans une application React pour créer et télécharger des rapports Excel.

Configuration et installation

Tout d’abord, installez la bibliothèque Exceljs. Ouvrez le terminal et exécutez la commande suivante dans le répertoire de votre projet React :

npm install exceljs file-saver

Copier après la connexion

La bibliothèque Exceljs sera utilisée pour créer et manipuler des classeurs (fichiers Excel), tandis que l'économiseur de fichiers gérera les téléchargements de fichiers dans le navigateur.

Étape 1 : Créer une fonction d'exportation Excel
Créez un nouveau fichier de composant, tel que ExportToExcel.js. Dans ce composant, nous allons créer une fonction exportExcel pour gérer la création de classeurs et de feuilles de calcul, ainsi que pour enregistrer le fichier Excel généré.

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;

Copier après la connexion

Étape 2 : Utiliser le composant ExportToExcel
Après avoir créé le composant ExportToExcel, utilisez-le dans un fichier approprié, tel que App.js. Assurez-vous que les données sont prêtes à être exportées vers 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;

Copier après la connexion

En utilisant Exceljs, générer des rapports Excel dans ReactJS devient simple et flexible. Ce guide montre comment créer un rapport Excel avec des en-têtes, l'insertion de données et un style d'en-tête de base.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!