How to Download a File using JavaScript

In this post, we'll learn how you can download a file programmatically in the browser using JavaScript.
To download a file, we can take advantage of several HTML features and use them programmatically to initiate a download a file.
The only thing you'll need is the URL to the file you want to download, and a name for the file.
To take advantage of the fact that links can initiate downloads, let's first create an anchor tag.
const anchor = document.createElement("a");
Next, we'll set the href attribute to the URL of the file we want to download.
const anchor = document.createElement("a");
anchor.href = "https://sabe.io/images/saturn.png";
Now, we'll set the download attribute to the name of the file we want to download. This is the magic that makes it a download.
const anchor = document.createElement("a");
anchor.href = "https://sabe.io/images/saturn.png";
anchor.setAttribute("download", "saturn.png");
Now we just need to click it so it initiates the download.
const anchor = document.createElement("a");
anchor.href = "https://sabe.io/images/saturn.png";
anchor.setAttribute("download", "saturn.png");
anchor.click();
That's pretty much it. That code should work right away. However, we should turn it into a function so that it can be easily re-used:
const downloadFile = (url, fileName) => {
const anchor = document.createElement("a");
anchor.href = url;
anchor.setAttribute("download", fileName);
anchor.click();
};
Now, you can just call it like this:
downloadFile("https://sabe.io/images/saturn.png", "saturn.png");
Conclusion
In this post, we've looked at how you can download a file programmatically in the browser using JavaScript.
Hopefully, this helped you download the file you want to download.
Thanks for reading and happy coding!
If you want to learn about web development, founding a start-up, bootstrapping a SaaS, and more, follow me on Twitter! You can also join the conversation over at our official Discord!
Leave us a message!