How to Convert Excel File into JSON in Javascript

Websolutionstuff | Jul-07-2021 | Categories : jQuery

Today in this small post i will show you how to convert excel file into json in javascript. Many time we have requirment to convert excel data into json and need to import into database so here, we will convert excel file into json object using javascript.

Here, we are creating html file to export excel to json data example.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>How to Convert Excel File into JSON in Javascript</title>
    <script
      type="text/javascript"
      src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.15.3/xlsx.full.min.js"
    ></script>
  </head>

  <body>
    <input type="file" id="fileUpload" accept=".xls,.xlsx" /><br />
    <button type="button" id="uploadExcel">Convert</button>
    <pre id="jsonData"></pre>
  </body>
  <script>
    var selectedFile;
    document
      .getElementById("fileUpload")
      .addEventListener("change", function(event) {
        selectedFile = event.target.files[0];
      });
    document
      .getElementById("uploadExcel")
      .addEventListener("click", function() {
        if (selectedFile) {
          var fileReader = new FileReader();
          fileReader.onload = function(event) {
            var data = event.target.result;

            var workbook = XLSX.read(data, {
              type: "binary"
            });
            workbook.SheetNames.forEach(sheet => {
              let rowObject = XLSX.utils.sheet_to_row_object_array(
                workbook.Sheets[sheet]
              );
              let jsonObject = JSON.stringify(rowObject);
              document.getElementById("jsonData").innerHTML = jsonObject;
              console.log(jsonObject);
            });
          };
          fileReader.readAsBinaryString(selectedFile);
        }
      });
  </script>
</html>

 

Recommended Post
Featured Post
How To Store Backup On Dropbox In Laravel 9
How To Store Backup On Dropbox...

In this article, we will see how to store the backup on dropbox in laravel 9. Here, we will learn to store database...

Read More

Jan-16-2023

How to Validate Reactive Form in Angular 17
How to Validate Reactive Form...

Hello developer, In this article, we'll see how to validate a reactive form in angular 17. Reactive forms...

Read More

Mar-27-2024

Laravel 9 Custom Helper Function Example
Laravel 9 Custom Helper Functi...

In this article, we will see laravel 9 custom helper function example. As we all know laravel provides many re...

Read More

Mar-07-2022

Laravel 8 Group By Query Example
Laravel 8 Group By Query Examp...

In this example we will see laravel 8 group by query example. how to use group by in laravel 8. As you might expect...

Read More

Nov-29-2021