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 Install Imagick PHP Extension on Ubuntu 22.04
How to Install Imagick PHP Ext...

Hey there, fellow developers! Are you looking to enhance your PHP applications with powerful image-processing capabiliti...

Read More

Mar-06-2024

Server Side Custom Search in Datatables
Server Side Custom Search in D...

In this example we will discuss about server side custom search in datatable. Datatable provides default searching...

Read More

Apr-05-2021

Laravel 10 Create AJAX Pagination Example
Laravel 10 Create AJAX Paginat...

In this article, we will see laravel 10 create an ajax pagination example. Here, we will learn about how to create...

Read More

Apr-17-2023

Laravel 11 Livewire Datatable Example
Laravel 11 Livewire Datatable...

Hello, laravel web developers! In this article, we'll see how to create datatable in laravel 11 livewire using medic...

Read More

Jun-05-2024