Effortlessly Convert Excel to JSON with JavaScript: Streamline Your Data Management with Sheet Js


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Excel To JSON Converter</title>
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <nav class="navbar bg-light shadow">
      <div class="container-fluid">
        <div class="navbar-brand mb-0 h1">Excel To JSON</div>
      </div>
    </nav>
    <div class="container rounded shadow border border-primary mt-3 mb-3 p-3">
      <form>
        <label for="file" class="mb-2">Select File</label>
        <input
          type="file"
          id="file"
          accept=".xls,.xlsx"
          class="form-control mb-2"
        />
        <label for="page" class="mb-2">Select Sheet</label>
        <select id="page" class="form-control mb-2">
          <option value="">Select Sheet</option>
        </select>
        <label for="result" class="mb-2">Result</label>
        <textarea
          id="result"
          cols="30"
          rows="10"
          class="form-control mb-2"
        ></textarea>
        <a href="" id="download" class="btn btn-primary">Download JSON</a>
      </form>
    </div>
    <script
      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"
      integrity="sha512-r22gChDnGvBylk90+2e/ycr3RVrDi8DIOkIGNhJlKfuyQM4tIRAI062MaV8sfjQKYVGjOBaZBOA87z+IhZE9DA=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>
    <script>
      let file = document.querySelector("#file");
      let page = document.querySelector("#page");
      let result = document.querySelector("#result");
      let download = document.querySelector("#download");
      let allSheet;
      file.addEventListener("change", () => {
        file.files[0].arrayBuffer().then((buffer) => {
          allSheet = XLSX.read(buffer);
          let forSelect = allSheet.SheetNames.reduce((acum, cur) => {
            return acum + `<option value="${cur}">${cur}</option>`;
          }, "");
          page.innerHTML = forSelect;
          let jsonObj = XLSX.utils.sheet_to_json(allSheet.Sheets[page.value]);
          let jsn = JSON.stringify({ data: jsonObj }, null, 4);
          result.value = jsn;
          download.href =
            "data:application/json;charset=utf-8," +
            encodeURIComponent(result.value);
          download.download = page.value;
        });
      });
      page.addEventListener("change", () => {
        let jsonObj = XLSX.utils.sheet_to_json(allSheet.Sheets[page.value]);
        let jsn = JSON.stringify({ data: jsonObj }, null, 4);
        result.value = jsn;
        download.href =
          "data:application/json;charset=utf-8," +
          encodeURIComponent(result.value);
        download.download = page.value;
      });
    </script>
  </body>
</html>

Explanation of above code.

The first few lines of code are HTML code that defines the structure and layout of the web page. The head section includes meta tags, a title tag, and a link tag that references a CSS file from a content delivery network (CDN) to style the page.
The navbar element creates a navigation bar at the top of the page with the title "Excel To JSON" using the Bootstrap framework.
The div element with class "container" creates a container that centers and adds padding to the form below it.
The form element contains the file input, select input, text area, and download button.
The file input element allows users to select a file with the .xls or .xlsx extension.
The select input element is initially empty, but is populated with the names of the sheets in the selected Excel file once it is uploaded.
The text area element is used to display the resulting JSON output from the selected Excel sheet.
The download button is a link that allows the user to download the resulting JSON output as a file.
The script tag imports the Bootstrap and xlsx libraries from CDNs.
The first script defines variables for the file input, select input, text area, and download button, as well as a variable to store all of the sheets in the uploaded Excel file.
The file input element listens for a change event, and when a file is selected, it reads the file as an array buffer using the XLSX library, and stores all of the sheets in the file in the allSheet variable. It then populates the select input element with the names of the sheets in the file, and converts the first sheet to JSON format using the XLSX library. It then converts the resulting JSON object to a string with four spaces of indentation and sets the text area value to this string. Finally, it sets the download link's href attribute to a data URI that contains the resulting JSON string, and sets the download link's download attribute to the name of the selected sheet.
The select input element listens for a change event, and when a different sheet is selected, it converts the new sheet to JSON format using the XLSX library. It then converts the resulting JSON object to a string with four spaces of indentation and sets the text area value to this string. Finally, it sets the download link's href attribute to a data URI that contains the resulting JSON string, and sets the download link's download attribute to the name of the newly selected sheet.

That's a brief overview of the code and how it works. Let me know if you have any questions or would like further clarification on any of the steps!

data parsing excel excel to json javascript

Effortlessly Convert Excel to JSON with JavaScript: Streamline Your Data Management with Sheet Js

Explanation of above code.

Popular Posts