Download files in apps

Within your Windmill apps, you might want users to download files. There are two options: the download button, and the transformers. Both involve manipulating data URLs scheme with a Base64 encoded string.

Download Button

The download button component allows you to download a file. The data source of the Download button must be a data URL scheme with a Base64 encoded string:

Transformers

A transformer is a function that alters the output of the runnable, often used to format the output.

You can then download the file from your browser with the right transformer:

// Assuming `result` is your data URL scheme with a Base64 encoded string

// Function to download the data as a file
function downloadDataAsFile(dataUrl, fileName) {
  // Create an anchor element
  const anchor = document.createElement('a');

  // Set the href to the data URL
  anchor.href = dataUrl;

  // Set the download attribute to the desired file name
  anchor.download = fileName;

  // Append the anchor to the body (required for Firefox)
  document.body.appendChild(anchor);

  // Trigger the download by simulating a click on the anchor
  anchor.click();

  // Remove the anchor from the body
  document.body.removeChild(anchor);
}

// Call the function with your data URL and a file name
downloadDataAsFile(result, 'name.file');

or if the result is just regular JSON:

// Function to download the data as a file
function downloadDataAsFile(dataUrl, fileName) {
  // Create an anchor element
  const anchor = document.createElement('a');

  // Set the href to the data URL
  anchor.href = dataUrl;

  // Set the download attribute to the desired file name
  anchor.download = fileName;

  // Append the anchor to the body (required for Firefox)
  document.body.appendChild(anchor);

  // Trigger the download by simulating a click on the anchor
  anchor.click();

  // Remove the anchor from the body
  document.body.removeChild(anchor);
}

// Call the function with your data URL and a file name
downloadDataAsFile(result, 'selected_row.md');

Here is an example of downloading a file from a button in a table.

And here is another example of a background script and a transformer automatically downloading a file upon input change (here the selected row of a table).