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 Check Password Strength Using JQuery
How To Check Password Strength...

In this article, we will see how to check password strength using jquery. here we will check whether password ...

Read More

Sep-04-2020

Laravel 9 Phone Number Validation Using Regex
Laravel 9 Phone Number Validat...

In this article, we will see laravel 9 phone number validation using regex. In laravel 9 we will see different meth...

Read More

Oct-25-2022

How To File Upload In React JS
How To File Upload In React JS

In this article, we will see how file uploads in react js. File uploading means a user from a client machine wants...

Read More

Sep-05-2022

Boosting Angular 15 Performance: Tips & Tricks
Boosting Angular 15 Performanc...

In the world of web development, performance is a crucial factor that directly affects user experience. Angular 15, the...

Read More

Jun-09-2023