How to Download a File using JavaScript

Updated onbyAlan Morel
How to Download a File using JavaScript

Table of Contents

  1. Conclusion

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!

To learn more about web development, founding a start-up, and bootstrapping a SaaS, follow me on X!
Copyright © 2017 - 2024 Sabe.io. All rights reserved. Made with ❤ in NY.