JSON to XLSX with airDev downloader: file format or file extension is not valid

Need help Plugins
3

Slow respone today, could be the vacation times :slight_smile:

But im thankful for beeing pushed to find the sulotion myself. Always the best way to learn :slight_smile:

So just for closing this post, this was break true.

18h in I find the most simple solutions…
Why no just ask GPT and let the machines take care of my hustle…To just share some “in my point of veiw” totaly revolutionast exåerience.

  1. I have created a document with all restriktions and limitations regarding the toolbox plugin (Bubble to JS, Server script) in the bubble.io environment and saved it as a doc.
  2. I start with pasting the doc to GPT (i prefer to user the market place "java script prodigy) ChatGPT - Java Script Prodigy
  3. Then i just stated my issue.

Boom, 20 min of consulting and .xllsx file was downloading like a super start…

// Function to convert a base64 string to a Blob
function base64ToBlob(base64, mime) {
const sliceSize = 512;
const byteChars = atob(base64);
const byteArrays = ;
for (let offset = 0; offset < byteChars.length; offset += sliceSize) {
const slice = byteChars.slice(offset, offset + sliceSize);
const byteNumbers = new Array(slice.length);
for (let i = 0; i < slice.length; i++) {
byteNumbers[i] = slice.charCodeAt(i);
}
const byteArray = new Uint8Array(byteNumbers);
byteArrays.push(byteArray);
}
return new Blob(byteArrays, { type: mime });
}
// Function to trigger the download
function triggerDownload(base64Data, fileName) {
const mimeType = ‘application/vnd.openxmlformats-officedocument.spreadsheetml.sheet’;
const blob = base64ToBlob(base64Data, mimeType);
const link = document.createElement(‘a’);
link.href = window.URL.createObjectURL(blob);
link.download = fileName;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
// Call this function with parameters passed from Bubble
triggerDownload(properties.param1, properties.param2);

JS code, just past in direkt in to Bubble to JS event in workflow

Discription:

Steps to Ensure a Complete Base64 String

  1. Obtain the Complete Base64 String: Ensure you have the entire base64-encoded content. The string should not include any text like “[truncated, was 23948]”.
  2. Decode the Base64 String: Use JavaScript to decode the base64 string and check its validity.

Bubble Setup

  1. Parameter 1 (Base64 String):
  • Ensure param1 is set to the complete base64-encoded string of your XLSX file.
  1. Parameter 2 (File Name):
  • Set param2 to the desired name of the file, e.g., "downloaded-file.xlsx".

Example Bubble Workflow

  1. Trigger the Download:
  • Create a button in your Bubble app to start the download process.
  • Add a workflow action to this button to run the JavaScript.
  1. Configure the Run Javascript Action:
  • Paste the JavaScript code provided above into the script editor of the Run Javascript action.
  • Set param1 to the complete base64-encoded string of the XLSX file.
  • Set param2 to the desired file name, e.g., "downloaded-file.xlsx".

By following these steps and ensuring the base64 string is complete and accurate, you should be able to correctly fetch and download the XLSX file without it being corrupted or mistaken for an HTML document.