📊 react-json-excel-exporter A simple, React-friendly library for exporting JSON data into Excel/CSV files directly from the frontend. It uses exceljs and file-saver under the hood.

✨ Features 📦 Export JSON data directly to .xlsx or .csv files.

🎨 Automatically generates headers from JSON keys.

🖋️ Supports custom column names and custom column order.

🗓️ Supports Year, Month, Date Range, or single Date in reports.

🧮 NEW: Supports info (summary) table with label/value pairs

⚡ Works seamlessly in React or any plain JavaScript environment.

🔥 No backend required; everything happens on the client side.

📦 Installation

Install the package

via npm:

npm install react-json-excel-exporter

Or

via yarn:

yarn add react-json-excel-exporter

Note: exceljs and file-saver are included automatically as dependencies. You don't need to install them separately.

🚀 Quick Usage Here's a simple example of how to use the library within a React component:

import { generateExcel } from "react-json-excel-exporter"

function App() {
  const data = [
    { Name: "Omal", Age: 25, Country: "Sri Lanka" },
    { Name: "Kelum", Age: 24, Country: "Sri Lanka" },
  ]

  const info = [
    { label: "Present", value: 5 },
    { label: "Absent", value: 1 },
    { label: "Idle", value: 21 },
    { label: "TotalCount", value: 27 },
  ]

  // 1. Normal download (default headers) with info
  const handleNormalDownload = () => {
    generateExcel({
      filename: "UsersReport_Normal",
      data,
      info,
      date: "2025-09-20",
    })
  }

  // 2. Custom headers (rename columns)
  const handleCustomHeaders = () => {
    generateExcel({
      filename: "UsersReport_CustomHeaders",
      data,
      headers: ["Full Name", "Age (Years)", "Country of Residence"], // order from JSON keys
      year: "2025",
    })
  }

  // 3. Custom headers + custom order
  const handleCustomOrder = () => {
    const headers = [
      { label: "Country of Residence", value: "Country" },
      { label: "Full Name", value: "Name" },
      { label: "Age (Years)", value: "Age" },
    ]

    generateExcel({
      filename: "UsersReport_CustomOrder",
      data,
      headers,
      fromdate: "2025-09-01",
      todate: "2025-09-20",
      type: "csv", // can be "xlsx" or "csv"
    })
  }

  return (
    <div style={{ padding: "2rem" }}>
      <h1>React JSON Excel Exporter Demo</h1>
      <button onClick={handleNormalDownload}>Normal Download</button>
      <button onClick={handleCustomHeaders} style={{ margin: "0 1rem" }}>
        Custom Headers
      </button>
      <button onClick={handleCustomOrder}>Custom Headers + Order</button>
    </div>
  )
}

export default App

Clicking this button will download an Excel file with a name like UsersReport_2025-09-19T12-30-00.xlsx.

📝 API Reference

The generateExcel function accepts a single options object with the following properties:

| Option | Type | Required | Description | | :--------- | :---------------- | :----------- | :-------------------------------------------------------------------------------------------------------------------- | | filename | string | Required | Base name for the Excel file (e.g., "UsersReport"). Timestamp and .xlsx extension are added automatically. | | data | array | Required | Array of JSON objects to export. Each object becomes a row in the spreadsheet. | | headers | array | Optional | Array of { label: string, value: string } for custom headers and column order. If not provided, JSON keys are used. | | year | string | Optional | Adds a "Year: [year]" header row to the Excel sheet. | | month | string | Optional | Adds a "Month: [month]" header row to the Excel sheet. | | fromdate | string | Optional | Start date for date range (e.g., "2025-01-01"). Must be used with todate. | | todate | string | Optional | End date for date range (e.g., "2025-01-31"). Must be used with fromdate. | | date | string | Optional | Single date (e.g., "2025-09-20"). Takes precedence over year/month/date range. | | info | string | Optional | NEW: Adds a summary/metrics/info table at the top of the Excel file. range. | | type | "xlsx" or "csv" | Optional | Export file type. Default is "xlsx". |

Export to Sheets

📚 Example Outputs

Example 1: With Year

generateExcel({
filename: "SalesReport",
data: [{ Product: "Shoes", Price: 100 }, { Product: "Bag", Price: 50 }],
year: "2025",
});
This will produce an Excel file with the following content:

Report Title - SalesReport Year: 2025

| Product | Price | | :------ | :---- | | Shoes | 100 | | Bag | 50 |

Example 2: With Date Range

generateExcel({
filename: "Attendance",
data: [{ Name: "Omal", Status: "Present" }, { Name: "Kelum", Status: "Absent" }],
fromdate: "2025-01-01",
todate: "2025-01-31",
});

This will produce an Excel file with the following content:

Report Title - Attendance Date Range: 2025-01-01 - 2025-01-31

| Name | Status | | :---- | :------ | | Omal | Present | | Kelum | Absent |