How trigger file downloads with JavaScript
Written by Stefan Judis
- Published at
- Updated at
- Reading time
- 1min
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!
Was this snippet helpful?
Yes? Cool! You might want to check out Web Weekly for more snippets. The last edition went out 13 days ago.
Yes? Cool! You might want to check out Web Weekly for more snippets. The last edition went out 13 days ago.