How to Convert Excel to JSON in JavaScript ?

Converting Excel spreadsheets to JSON format is a common requirement in various applications. JavaScript code utilizes the read-excel-file library to parse the Excel data, convert it to JSON format, and display it. Additionally, it provides functionality to download the generated JSON file.

Approach

Create an HTML file with a div containing an input file element to allow users to select an Excel file. Also, include a text area to display the JSON data and a button to trigger the conversion process.
Reference the "read-excel-file" library in your HTML file. You can find the link to the library in the code.
Write JavaScript functions to handle the conversion process. Use event listeners to detect changes in the input file selection. Use the library to read the Excel file and convert it into a JSON string. Display the JSON string in the text area.
Implement a function to download the JSON data as a file when the user clicks the download button.

Example: The below example shows converting Excel to JSON in JavaScript.

HTML

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

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0" />
    <title>Excel to JSON Converter</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }

        .container {
            max-width: 800px;
            margin: 50px auto;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
            background-color: #f9f9f9;
        }

        .input-container {
            margin-bottom: 20px;
        }

        .input-container input[type="file"] {
            display: none;
        }

        .input-container label {
            display: block;
            padding: 10px 15px;
            background-color: #007bff;
            color: #fff;
            text-align: center;
            cursor: pointer;
            border-radius: 5px;
        }

        .input-container label:hover {
            background-color: #0056b3;
        }

        .btn {
            padding: 10px 15px;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        .btn:hover {
            background-color: #0056b3;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="input-container">
            <input type="file" id="excel_file" 
                   accept=".xlsx, .xls" />
            <label for="excel_file">
              Select Excel File
              </label>
        </div>

        <button class="btn" id="convert_btn">
          Convert to JSON
          </button>

        <div class="input-container">
            <textarea id="json_data" rows="10" 
                      cols="50" readonly>
              </textarea>
        </div>

        <button class="btn" id="download_btn">
          Download JSON File
          </button>
    </div>

    <script src=
"https://unpkg.com/read-excel-file@5.x/bundle/read-excel-file.min.js">
      </script>

    <script>
        document
            .getElementById("convert_btn")
            .addEventListener("click", function () {
                const input = document.getElementById("excel_file");
                readXlsxFile(input.files[0]).then(function (data) {
                    const headers = data[0];
                    const jsonData = [];
                    for (let i = 1; i < data.length; i++) {
                        const temp = {};
                        for (let j = 0; j < headers.length; j++) {
                            temp[headers[j]] = data[i][j];
                        }
                        jsonData.push(temp);
                    }
                    document.getElementById("json_data")
                              .value = JSON.stringify(
                        jsonData,
                        null,
                        2
                    );
                });
            });

        document
            .getElementById("download_btn")
            .addEventListener("click", function () {
                const jsonData = document.getElementById("json_data").value;
                downloadObjectAsJson(jsonData, "excel_to_json");
            });

        function downloadObjectAsJson(jsonData, filename) {
            const dataStr =
                "data:text/json;charset=utf-8," + 
                  encodeURIComponent(jsonData);
            const downloadAnchorNode = document.createElement("a");
            downloadAnchorNode.setAttribute("href", dataStr);
            downloadAnchorNode.setAttribute("download", filename + ".json");
            document.body.appendChild(downloadAnchorNode);
            downloadAnchorNode.click();
            downloadAnchorNode.remove();
        }
    </script>
</body>

</html>

Output:

Recording-2024-04-06-092058

Article Tags :

HTML

Web Technologies

JSON