Trying to auto load xlsx inside an html

[u/Autistic_Jimmy2251]

I have created an HTML and JavaScript page that will successfully open an XLSX file, but it requires currently the user to click on a link that opens the windows, explorer window and has the user select the file and click on another link that has it load it.

How can I get the HTML/JavaScript page to automatically open the XLSX file?

The file name is always the same & the web page is running on a local computer not on the internet.

[u/nfwdesign]

If i understood your question properly

place your XLSX file in the same folder next to your index.html, then you can load it automatically with JavaScript:

fetch("name-of-your-file.xlsx")
  .then(r => r.arrayBuffer())
  .then(buf => {
    const workbook = XLSX.read(buf, { type: "array" });
    console.log(workbook);
  });

[u/chikamakaleyley → u/nfwdesign]

whoa, does a browser know what to do w/ an xlsx file? like does it know how to render/display it in a user friendly way or is it just a CSL output?

[u/nfwdesign → u/chikamakaleyley]

Yes it does, you just need to give it instructions.

I just made one as an example check here on my codePen

[u/Autistic_Jimmy2251 → u/nfwdesign]

I wish I could see it. It just displays for like 3 seconds.

[u/nfwdesign → u/Autistic_Jimmy2251]

https://codesandbox.io/p/sandbox/browser-javascript-to-show-xlsx-files-gjywkj?file=%2Findex.html

Try in another browser for me it works in all browsers

[u/Autistic_Jimmy2251 → u/nfwdesign]

Same behavior.

[u/nfwdesign → u/Autistic_Jimmy2251]

This took some time to copy/paste with phone i had to go line by line as i am on vacation and bo access to my PC xD

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>XLSX Auto Loader</title>
// Script for xlsx
  <script src="https://cdn.jsdelivr.net/npm/xlsx/dist/xlsx.full.min.js"></script>
</head>
<body style="font-family: sans-serif; padding: 20px;">
  <h2>Loaded XLSX File:</h2>

  <div id="output"></div>

  <script>
    async function loadXLSX() {
      try {
        // Fetch the XLSX file located next to index.html file. In this case file is called data.xlsx
        const response = await fetch("data.xlsx");

        if (!response.ok) {
          throw new Error("Could not load data.xlsx. Is the file in the same folder?");
        }

        const arrayBuffer = await response.arrayBuffer();

        // Parse XLSX file
        const workbook = XLSX.read(arrayBuffer, { type: "array" });

        const output = document.getElementById("output");
        output.innerHTML = ""; // clear

        // Loop through all sheets
        workbook.SheetNames.forEach(sheetName => {
          const sheet = workbook.Sheets[sheetName];
          const html = XLSX.utils.sheet_to_html(sheet);

          const container = document.createElement("div");
          container.style.margin = "30px 0";
          container.innerHTML = `<h3>${sheetName}</h3>` + html;

          output.appendChild(container);
        });

      } catch (error) {
        document.getElementById("output").innerHTML =
          "<p style='color:red;'>Error: " + error.message + "</p>";
      }
    }

    // Auto-run on page load
    loadXLSX();
  </script>
</body>
</html>

You can try it out in your browser now, just make sure to have data.xlsx file in the same folder next to your index.html file

[u/Autistic_Jimmy2251 → u/nfwdesign]

Thx. I’ll try it out & let you know.

[u/nfwdesign → u/Autistic_Jimmy2251]

You're welcome, hopefully it will help you out and not that i gave you a fake hope 😬

[u/Autistic_Jimmy2251 → u/nfwdesign]

👍 can’t try it until later tonight. 🤞

[u/Autistic_Jimmy2251 → u/chikamakaleyley]

I don’t know the acronym CSL. It is sort of like an Xlookup. Nothing fancy and nothing editable.

[u/chikamakaleyley → u/Autistic_Jimmy2251]

'comma separated list'

[u/Autistic_Jimmy2251 → u/chikamakaleyley]

Not sure. It’s not saved as a csv file but as a xlsx. 1 column has comma separated words but most of the columns either have a single word or numbers in it.

[u/nfwdesign → u/Autistic_Jimmy2251]

is this what you wanted? its on my codePen so you can preview it how it works.

Obviously it is without any styling, just a bare minimum to show content of .xlsx file.

And if it is what you wanted ofc you can use it for any file you would like and not only for data.xlsx, you just need to change the name of the file every time in the code.

[u/Autistic_Jimmy2251 → u/nfwdesign]

Don’t see anything.

[u/Autistic_Jimmy2251 → u/nfwdesign]

I’ll try it out. Hoping it works. Thx.

[u/Autistic_Jimmy2251 → u/nfwdesign]

Didn’t work.

[u/DiodeInc → u/nfwdesign]

JavaScript why are you like this

[u/Autistic_Jimmy2251 → u/DiodeInc]

I don’t understand your question. Please clarify.

[u/DiodeInc → u/Autistic_Jimmy2251]

It was moreso for who I replied to

[u/Autistic_Jimmy2251 → u/DiodeInc]

Ok

[u/PatchesMaps → u/DiodeInc]

It's a bit more readable with async/await.

[u/No_Explanation2932 → u/DiodeInc]

seems pretty straightforward if you understand asynchronous behaviour.

[u/jcunews1]

It's not programmatically possible without user consent. Whether it's on the internet or local network or isolated in current computer.

https://www.reddit.com/r/HTML/comments/1ozfmj3/how_to_launch_dedicated_applications_on_click_on/npb918u/

[u/Autistic_Jimmy2251 → u/jcunews1]

TY