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.

JAVASCRIPT
const anchor = document.createElement("a");

Next, we'll set the href attribute to the URL of the file we want to download.

JAVASCRIPT
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.

JAVASCRIPT
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.

JAVASCRIPT
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:

JAVASCRIPT
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:

JAVASCRIPT
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!

• Support Us