How to Convert JSON to Excel in JavaScript?

Last Updated : 09 Sep, 2024

It is often necessary to export or download JSON data in the form of Excel spreadsheets when developing web applications, any web developer would be able to go through this article as it provides a useful function of converting JSON files to Excel format using SheetsJS through JavaScript.

These are the following ways:

Table of Content

Using SheetJS (xlsx)
Using ExcelJS
Using FileSaver.js with CSV Format

Using `SheetJS` (xlsx)

SheetJS is one of those libraries, which specializes in all the operations such as reading, writing, or modifying the files containing spreadsheets, the library includes the support of a number of different formats including the Excel format (XLSX).

You can also install library via npm:

npm install xlsx

Alternatively you can also include the library directly in your HTML:

<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>

Example: This example shows the use of SheetJs to convert JSON to Excel.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0">
    <title>Convert JSON to Excel</title>
    <script src=
 "https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js">
   </script>
</head>

<body>
    <h1>GeeksForGeeks</h1>
    <h5>Approach 1: Using SheetJS (xlsx)</h5>

    <button id="export-btn">Export JSON to Excel</button>

    <script>
        // Sample JSON data
        const jsonData = [
            { "Name": "Pankaj Bind", "Age": 21, "Country": "India" },
            { "Name": "Sandeep Singh", "Age": 30, "Country": "Canada" },
            { "Name": "Vivek Kumar", "Age": 22, "Country": "UK" }
        ];

        // Function to export JSON data to Excel
        function exportJsonToExcel() {
            // Create a new workbook
            const workbook = XLSX.utils.book_new();

            // Convert JSON data to a worksheet
            const worksheet = XLSX.utils.json_to_sheet(jsonData);

            // Append the worksheet to the workbook
            XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");

            // Export the workbook as an Excel file
            XLSX.writeFile(workbook, "data.xlsx");
        }

        // Event listener for the export button
        document.getElementById("export-btn").addEventListener("click", exportJsonToExcel);
    </script>

</body>

</html>

Output:

Using `ExcelJS`

ExcelJS is also a powerful library which provides ability to create new Excel spreadsheets or modify existing ones from within JavaScript and apply some style.

You can also install library via npm:

npm install exceljs

Alternatively you can also include library directly in your HTML:

<script src="https://cdnjs.cloudflare.com/ajax/libs/exceljs/4.3.0/exceljs.min.js"></script>

Example: This example shows the use of ExcelJS to convert JSON to Excel.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0">
    <title>Convert JSON to Excel using ExcelJS</title>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/exceljs/4.3.0/exceljs.min.js"></script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
</head>

<body>
    <h1>GeeksForGeeks</h1>
    <h5>Approach 2: Using ExcelJS</h5>
    <button id="export-btn">Export JSON to Excel</button>

    <script>
        // Sample JSON data
        const jsonData = [
            { "Name": "Pankaj Bind", "Age": 21, "Country": "India" },
            { "Name": "Sandeep Singh", "Age": 30, "Country": "Canada" },
            { "Name": "Vivek Kumar", "Age": 22, "Country": "UK" }
        ];

        // Function to export JSON to Excel using ExcelJS
        async function exportJsonToExcel() {
            // Create a new workbook
            const workbook = new ExcelJS.Workbook();
            const worksheet = workbook.addWorksheet("Sheet1");

            // Add column headers
            worksheet.columns = [
                { header: "Name", key: "name" },
                { header: "Age", key: "age" },
                { header: "Country", key: "country" }
            ];

            // Add rows to the worksheet
            jsonData.forEach(data => {
                worksheet.addRow({
                    name: data.Name,
                    age: data.Age,
                    country: data.Country
                });
            });

            // Export the workbook to Excel file
            const buffer = await workbook.xlsx.writeBuffer();
            const blob = new Blob([buffer], 
            { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" });
            saveAs(blob, "data.xlsx");
        }

        document.getElementById("export-btn").addEventListener("click", exportJsonToExcel);
    </script>

</body>

</html>

Output:

Using `FileSaver.js` with CSV Format

Converting the JSON into a CSV file format and then providing this as a downloadable file which can be opened as excel exported well this approach works too, this is a simple solution if you don’t want all the overhead that comes with using the Microsoft excel file format.

You can also install library via npm:

npm install file-saver

Alternatively you can also include library directly in your HTML:

<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>

Example: This example shows the use of FileSaver.js to convert JSON to Excel.