Excel js + React JS

Excel is widely used for various data reports. In a ReactJS application, we can use the exceljs library to dynamically create Excel files. This article will guide you through implementing exceljs in a React app to create and download Excel reports.

Setup and Installation

First, install the exceljs library. Open the terminal and run the following command in your React project directory:

npm install exceljs file-saver

The exceljs library will be used to create and manipulate workbooks (Excel files), while file-saver will handle file downloads in the browser.

Step 1: Create an Export Excel Function
Create a new component file, such as ExportToExcel.js. In this component, we will create an exportExcel function to handle workbook and worksheet creation, as well as saving the generated Excel file.

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;

Step 2: Use the ExportToExcel Component
After creating the ExportToExcel component, use it in a relevant file, such as App.js. Ensure you have the data ready for export to Excel.

import React from 'react';
import ExportToExcel from './ExportToExcel';

const App = () => {
  const data = [
    { id: 1, name: 'Name 1', email: '[e-mail]', joinDate: '2023-01-15' },
    { id: 2, name: 'Name 2', email: '[e-mail]', 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;

Using exceljs, generating Excel reports in ReactJS becomes easy and flexible. This guide demonstrates how to create an Excel report with headers, data insertion, and basic header styling.