How to trigger a file download when clicking an HTML button or JavaScript

javascript

download-triggers

blob-urls

data-urls

byAlex Kataev·Feb 22, 2025

To download a file on a button click, employ a hidden <a> element along with JavaScript. The element’s href should align with your file's link, and its click() method should be invoked. Here's the crux:

<button onclick="triggerDownload('file.zip')">Download File</button>

<script>
function triggerDownload(fileName) {
  var element = document.createElement('a');
  element.setAttribute('href', fileName);
  element.setAttribute('download', fileName);
  element.style.display = 'none';
  document.body.appendChild(element);
  // More ninja than a typical programmer's click ;)
  element.click();
  document.body.removeChild(element);
}
</script>

Just replace 'file.zip' with the file's URL and desired download name. Voilà! You've got a sleek download initiation via a button in HTML.

Catalysts to Activate Downloads in JavaScript

Download triggers have many forms in JavaScript. Here's a smorgasbord of client-side scenarios to kickstart downloads without any back-end hocus-pocus!

Dynamically Crafting "Blob" and "Data" URLs

Handle unconventional file sources including dynamic and user-generated content using the Blob interface and data URLs. The Blob files away data, while data URLs pack data in line.

const data = new Blob([content], {type: 'text/plain'});
const url = URL.createObjectURL(data); // Tag! You're Blob!
downloadFile('dynamic.txt', url); // Yoink a dynamic download!

Remember to release blob URLs via URL.revokeObjectURL() to dodge pesky memory leaks — because nobody loves a memory hog!

The Swift "window.open" Maneuver

Got file accessible via URL? Just swipe this line:

window.open('path/to/file.zip');

Easy as pie but beware of popup blockers crashing your download party since it’s practically a new window under the hood.

Direct Downloads with window.location

Want a ninja download? Sneak window.location to the file’s URL:

function directDownload(url) {
  window.location = url; // Abracadabra! Download!
}

It’s akin to an automated robot click on a regular download link ... only stealthier.

Play Nice with Same-Origin Policy

Same-origin policy can gatekeep downloads to resources from the same domain. Tackle external file download requests by proxying through the backend or tuning CORS, if the external server is yours to command.

Using UI controls for Prettier Interface

If your visual instinct craves a more aesthetically pleasing UI, opt for <button> or <input type="button"> elements disguised as common controls. With JavaScript, these can ignite the download silently, marrying beauty with duty:

<button onclick="downloadFile('report.pdf', '/documents/report.pdf')">Download Report</button>

Team Up with Server-side Headers for Forceful Downloads

Sometimes, you may need a little server-side alliance. If you can tweak server settings, tag along Content-Disposition: attachment header to the server response to nudge download on navigation.

Extracting File Names from URLs for Efficiency

Pull out the file name from the URL for the download attribute to avoid string duplicities and conjure more magic:

function downloadFileFromURL(url) {
  const fileName = url.split('/').pop(); // Just like plucking cherries!
  downloadFile(fileName, url);
}

explain-codes / Javascript / How to trigger a file download when clicking an HTML button or JavaScript

Linked

Download data URL file



Using HTML5/JavaScript to generate and save a file



How to set the name of a file downloaded from a browser?



How do I download a file with Angular2 or greater



Is it possible to write data to file using only JavaScript?



Javascript blob filename without link



Download a file by jQuery.Ajax

