-1

Below code using for displaying excel data to html table by using JavaScript. here we need to upload any excel file from local, but I want to use direct fixed/permanent excel file path (from server) instead of uploading. how to do that with below code.

I have an excel file in server which regularly updating data, for eg. "www.myserver.com/tabledata.xlsx" I wanted to use this link instead of "manually uploading any files." on page load, data from www.myserver.com/tabledata.xlsx should load in HTML page without file upload section.

<html>
  <head>
    <meta charset="utf-8" />
    <title>Convert Excel to HTML Table using JavaScript</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
      integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
      crossorigin="anonymous"  />

   <script type="text/javascript" src="https://unpkg.com/xlsx@0.15.1/dist/xlsx.full.min.js"></script>         
  </head>
  <body>
    <div class="container">
      <h2 class="text-center mt-4 mb-4">
        Convert Excel to HTML Table using JavaScript
      </h2>
      <div class="card">
        <div class="card-header"><b>Select Excel File</b></div>
        <div class="card-body">
          <input type="file" id="excel_file" />
        </div>
      </div>
      <div id="excel_data" class="mt-5"></div>
    </div>
  </body>
</html>

  const excel_file = document.getElementById("excel_file");

  excel_file.addEventListener("change", (event) => {
    if (
      ![
        "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
        "application/vnd.ms-excel",
      ].includes(event.target.files[0].type)
    ) {
      document.getElementById("excel_data").innerHTML =
        '<div class="alert alert-danger">Only .xlsx or .xls file format are allowed</div>';

      excel_file.value = "";

      return false;
    }

    var reader = new FileReader();

    reader.readAsArrayBuffer(event.target.files[0]);

    reader.onload = function (event) {
      var data = new Uint8Array(reader.result);

      var work_book = XLSX.read(data, { type: "array" });

      var sheet_name = work_book.SheetNames;

      var sheet_data = XLSX.utils.sheet_to_json(
        work_book.Sheets[sheet_name[0]],
        { header: 1 }
      );

      if (sheet_data.length > 0) {
        var table_output = '<table class="table table-striped table-bordered">';

        for (var row = 0; row < sheet_data.length; row++) {
          table_output += "<tr>";

          for (var cell = 0; cell < sheet_data[row].length; cell++) {
            if (row == 0) {
              table_output += "<th>" + sheet_data[row][cell] + "</th>";
            } else {
              table_output += "<td>" + sheet_data[row][cell] + "</td>";
            }
          }

          table_output += "</tr>";
        }

        table_output += "</table>";

        document.getElementById("excel_data").innerHTML = table_output;
      }

      excel_file.value = "";
    };
  });
PRANAV
  • 1,009
  • 5
  • 16
  • 36
  • You've since changed the nature of the question. If you want to read data *from the server* with JavaScript code then the technology you're looking for is called AJAX. The linked duplicates can help you get started, additionally there are many examples and tutorials to be found online for using AJAX to fetch data from the server. – David Aug 10 '23 at 11:45

1 Answers1

-1

const excel_file = document.getElementById("excel_file");

excel_file.addEventListener("change", (event) => {
  const allowedExtensions = ["xlsx", "xls", "csv"];

  const fileName = event.target.files[0].name;
  const fileExtension = fileName.split(".").pop().toLowerCase();

  if (!allowedExtensions.includes(fileExtension)) {
    document.getElementById("excel_data").innerHTML =
      '<div class="alert alert-danger">Only Excel and CSV file formats are allowed</div>';
    excel_file.value = "";
    return false;
  }

  var reader = new FileReader();

  reader.readAsArrayBuffer(event.target.files[0]);

  reader.onload = function (event) {
    var data = new Uint8Array(reader.result);

    var work_book = XLSX.read(data, { type: "array" });

    var sheet_name = work_book.SheetNames;

    var sheet_data = XLSX.utils.sheet_to_json(
      work_book.Sheets[sheet_name[0]],
      { header: 1 }
    );

    if (sheet_data.length > 0) {
      var table_output = '<table class="table table-striped table-bordered">';

      for (var row = 0; row < sheet_data.length; row++) {
        table_output += "<tr>";

        for (var cell = 0; cell < sheet_data[row].length; cell++) {
          if (row == 0) {
            table_output += "<th>" + sheet_data[row][cell] + "</th>";
          } else {
            table_output += "<td>" + sheet_data[row][cell] + "</td>";
          }
        }

        table_output += "</tr>";
      }

      table_output += "</table>";

      document.getElementById("excel_data").innerHTML = table_output;
    }

    excel_file.value = "";
  };
});
<html>
  <head>
    <meta charset="utf-8" />
    <title>Convert Excel to HTML Table using JavaScript</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
      integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
      crossorigin="anonymous"  />

   <script type="text/javascript" src="https://unpkg.com/xlsx@0.15.1/dist/xlsx.full.min.js"></script>         
  </head>
  <body>
    <div class="container">
      <h2 class="text-center mt-4 mb-4">
        Convert Excel to HTML Table using JavaScript
      </h2>
      <div class="card">
        <div class="card-header"><b>Select Excel File</b></div>
        <div class="card-body">
          <input type="file" id="excel_file" />
        </div>
      </div>
      <div id="excel_data" class="mt-5"></div>
    </div>
  </body>
</html>
Arun
  • 17
  • 5
  • 1
    What is the difference with the original code in the question? I can't see any explication nor changes to the code to handle "already uploaded documents on a server". @PRANAV would like to load an Excel file which is already hosted somewhere else, not a local file. – Patrick Janser Aug 10 '23 at 12:04
  • i have worked above as the you pranav asked about support all excel file formats. what happened for my reputation reduced. i don't know pls explain anyone. @Patrick Janser – Arun Aug 10 '23 at 12:07
  • 1
    @Arun: *"what happened for my reputation reduced"* - The answer was down-voted probably because it's just a dump of code with no explanation or meaningful answer to the question. Please see: [How do I write a good answer?](https://stackoverflow.com/help/how-to-answer) – David Aug 10 '23 at 12:12
  • Sorry @Arun, but I didn't downvote your answer, but just added a comment to let you know that your answer wasn't very useful for the question, as the problematic is to open a remote Excel file. – Patrick Janser Aug 10 '23 at 12:12
  • okay got it @Patrick Janser – Arun Aug 10 '23 at 12:22
  • "already uploaded documents on a server" I mean, I have an excel file in server which regularly updating, for eg. "www.myserver.com/tabledata.xlsx" I wanted to use this link instead of "manually uploading any files." on page load data from www.myserver.com/tabledata.xlsx should load in HTML page without file upload section. – PRANAV Aug 10 '23 at 15:16
  • any scope for above comment ???? – PRANAV Aug 11 '23 at 11:05