DEV Community

ramadhan.dev
ramadhan.dev

Posted on

1

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
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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: '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;
Enter fullscreen mode Exit fullscreen mode

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.

SurveyJS custom survey software

JavaScript UI Libraries for Surveys and Forms

SurveyJS lets you build a JSON-based form management system that integrates with any backend, giving you full control over your data and no user limits. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more.

Learn more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more