Custom Exporting Techniques - Example

[AlejandroFNadal]

Hello everyone!
EDIT: I wanted to leave this here as a reference for anyone trying to do an export from a query (the normal budibase export feature will not work in this scenario).
EDIT 2: Adding how to use base64 files. Also works only in chrome/chromium.

Note: This only works in Chrome and Chromium. I have no idea why, if someone could modify this to make it work in firefox.
EDIT: It also doesn't work depending on how deep you place the button in your component tree. I had one scenario where my button worked if it was under one DP and two containers, but it didn't work under three nested DP and three containers. So keep in mind placing the button somewhere else if you see that it doesn't work for you. My guess is that some of the operations end up affecting some autogenerated div instead of the actual browser, but it is only a guess.

Steps:

1. Create a button
2. In actions, first run the query
3. Then, add a "Save state" action (write whatever you want in the key, we will not use this value anyway) where you transform the data using javascript, then create a temporal anchor html element, create a Blob file, donwload it through a simulated click. Here is how I did it (it generates a CSV):

rawResults = $("Action 1.Query result.data")
arrayAllValues = rawResults.map((row) => {
	values = Object.values(row).join(',')
	return values
})
stringAllValues = arrayAllValues.reduce((growingString, elem) => {
	return (growingString + '\n'+ elem)
})
// adding header
if(rawResults != []){
	header = Object.keys(rawResults[0]).join(',')
	stringAllValues = header + '\n' + stringAllValues
}


const TextObj = new Blob([stringAllValues]);
const elem = window.document.createElement('a');
elem.href =  window.URL.createObjectURL(TextObj);
newDate = new Date().toISOString()
elem.download = `export_${newDate}.csv`;
window.document.body.appendChild(elem);
elem.click()
window.document.body.removeChild(elem)

I hope this is useful to someone :-D

EDIT 2:
Now, if you need binary files and you are getting them through an API as base64 :

function downloadBase64File(base64Content, fileName) {
  const contentType = 'application/vnd.openxmlformats-officedocument.wordprocessingml.document';
  const byteCharacters = atob(base64Content);
  const byteNumbers = new Array(byteCharacters.length);

  for (let i = 0; i < byteCharacters.length; i++) {
    byteNumbers[i] = byteCharacters.charCodeAt(i);
  }

  const byteArray = new Uint8Array(byteNumbers);
  const blob = new Blob([byteArray], { type: contentType });

  // Create download link and click it
  const link = document.createElement('a');
  link.href = URL.createObjectURL(blob);
  link.download = fileName;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

// Usage: pass the base64 content and desired file name
downloadBase64File($("Action 1.Query result.data.0.entities"), `Offer_${$("URL.id")}.docx`);

In that scenario, we were downloading a word file, so the "contentType" thing is different. The Action 1 was a API request.
My original post below

I am stuck with something and I would love some ideas. I think that if what I am trying to do is possible and if someone guides me a bit, it might be of use to other people.

I need to generate a file and download it (I want to export data from rows and generate a csv, and I need custom queries so the normal export of budibase is not an option for me). That is my end goal but for now I am only trying to donwload a single file with some characters in it.

Note: this is exactly what I am placing in the embed.

<a id="export" class="myButton"  download="" href="#">export</a>                                                                                                       
  <script>
       const blobobj = new Blob(['test']);
       let elem = window.document.getElementById('export');
       elem.href =  window.URL.createObjectURL(blobobj);
       elem.download = 'sth.txt';
   </script>

So I am trying to create a link that generates a blob file with the word text inside of it and download it. I am placing this inside an embed. When I click the button, I get redirected to my home url in budibase.

I have tested this code in a browser, outside budibase, and it works (inside html and body tags)

Could someone give me some direction on what I am doing wrong?

[proxy318]

This is great, thanks for sharing!

[alimars]

This is really useful, thank you so much!

[simon-lewis]

Bloody marvellous. This is useful in getting around the limitations of the Export Data action. thanks @AlejandroFNadal

[dpieski]

Sadly, I am getting a "ReferenceError: Blob is not defined"

[AlejandroFNadal]

I have stopped using this technique and instead I am just using endpoints, and those endpoints write the stuff directly in MinIO. It is more convoluted, but it works in all browsers instead of just in a few.

[dpieski]

Thanks! That was what I figured I would end up doing. I appreciate the response.