Download a File Using Just JavaScript

Question

To programmatically trigger a file, located on the server, using JavaScript, here's what I'm currently doing:

HTML

<a id="downloadPDF" href="/my.pdf" download style="display: none;">Download PDF</a>

JavaScript

<script type="text/javascript">
    document.getElementById('downloadPDF').click();
</script>

It works, but it feels rather "hackish" to me. Is there a better, more straightforward way of doing it without using HTML and triggering clicks?

Important: No libraries or data URIs. The file should download not open.

Does this answer your question? [Force download through js or query](https://stackoverflow.com/questions/5192917/force-download-through-js-or-query) — A. Meshu, Dec 08 '20 at 23:02
@A.Meshu seems OP is already well aware of the information in that post — Phil, Dec 08 '20 at 23:08
_'It works, but it feels rather "hackish"'_... welcome to web application programming — Phil, Dec 08 '20 at 23:09
Well, you can alter your function to dynamically create hidden tag, click it and delete... — tarkh, Dec 08 '20 at 23:16

tarkh · Answer 1 · 2020-12-08T23:26:55.680

This is just extension to method, that you have provided in your question. Differences is that this function do all work in background.

// DL function
const download = function(file) {
  // Create a tag
  const a = document.createElement('a');
  // Set href
  a.href = file;
  // Set file name
  a.download = file.substr(file.lastIndexOf('/') + 1);
  // Append tag to body
  document.body.appendChild(a);
  // Click it
  a.click();
  // Remove
  document.body.removeChild(a);
}

// Do download
download('https://file-examples-com.github.io/uploads/2017/02/zip_2MB.zip');

score 0 · Accepted Answer · answered Dec 09 '20 at 00:55

Here's my implementation, which I like more since it's cleaner:

document.querySelector( 'body' ).insertAdjacentHTML( 'beforeend', '<a id="downloadPDF" href="/my.pdf" download style="display: none;"></a>' );

document.getElementById( 'downloadPDF' ).click();

Download a File Using Just JavaScript

HTML

JavaScript

2 Answers2