How trigger file downloads with JavaScript (#snippet)

I’m just parking the following snippet for the future. ?
Years ago, I had to fiddle around with dynamic file downloads in a single page application. And let me tell you that it was very painful. Rik Schennink shared a snippet to tri…


This content originally appeared on Stefan Judis Web Development and was authored by Stefan Judis

I'm just parking the following snippet for the future. ?

Years ago, I had to fiddle around with dynamic file downloads in a single page application. And let me tell you that it was very painful. Rik Schennink shared a snippet to trigger file downloads. That code will come in handy for my future self!

function downloadFile(file) {
  // Create a link and set the URL using `createObjectURL`
  const link = document.createElement("a");
  link.style.display = "none";
  link.href = URL.createObjectURL(file);
  link.download = file.name;

  // It needs to be added to the DOM so it can be clicked
  document.body.appendChild(link);
  link.click();

  // To make this work on Firefox we need to wait
  // a little while before removing it.
  setTimeout(() => {
    URL.revokeObjectURL(link.href);
    link.parentNode.removeChild(link);
  }, 0);
}

// Dynamically create a File
const myFile = new File([`${new Date()}: Meow!`], "my-cat.txt");

// Download it using our function
downloadFile(myFile);

Thanks Rik!


Reply to Stefan


This content originally appeared on Stefan Judis Web Development and was authored by Stefan Judis


Print Share Comment Cite Upload Translate Updates
APA

Stefan Judis | Sciencx (2021-03-19T23:00:00+00:00) How trigger file downloads with JavaScript (#snippet). Retrieved from https://www.scien.cx/2021/03/19/how-trigger-file-downloads-with-javascript-snippet/

MLA
" » How trigger file downloads with JavaScript (#snippet)." Stefan Judis | Sciencx - Friday March 19, 2021, https://www.scien.cx/2021/03/19/how-trigger-file-downloads-with-javascript-snippet/
HARVARD
Stefan Judis | Sciencx Friday March 19, 2021 » How trigger file downloads with JavaScript (#snippet)., viewed ,<https://www.scien.cx/2021/03/19/how-trigger-file-downloads-with-javascript-snippet/>
VANCOUVER
Stefan Judis | Sciencx - » How trigger file downloads with JavaScript (#snippet). [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/03/19/how-trigger-file-downloads-with-javascript-snippet/
CHICAGO
" » How trigger file downloads with JavaScript (#snippet)." Stefan Judis | Sciencx - Accessed . https://www.scien.cx/2021/03/19/how-trigger-file-downloads-with-javascript-snippet/
IEEE
" » How trigger file downloads with JavaScript (#snippet)." Stefan Judis | Sciencx [Online]. Available: https://www.scien.cx/2021/03/19/how-trigger-file-downloads-with-javascript-snippet/. [Accessed: ]
rf:citation
» How trigger file downloads with JavaScript (#snippet) | Stefan Judis | Sciencx | https://www.scien.cx/2021/03/19/how-trigger-file-downloads-with-javascript-snippet/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.