Table of Contents
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.
JAVASCRIPTconst anchor = document.createElement("a");
Next, we'll set the href attribute to the URL of the file we want to download.
JAVASCRIPTconst 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.
JAVASCRIPTconst 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.
JAVASCRIPTconst 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:
JAVASCRIPTconst 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:
JAVASCRIPTdownloadFile("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!
- Managing PHP Dependencies with Composer
- Getting Started with Electron
- Git Tutorial: Learn how to use Version Control
- How to deploy a .NET app using Docker
- How to deploy a Deno app using Docker
- Getting Started with Deno
- Getting Started with Sass
- Using Puppeteer and Jest for End-to-End Testing
- Getting Started with Moment.js
- Creating a Twitter bot with Node.js
- Setting Up Stylus CSS Preprocessor
- Setting Up a Local Web Server using Node.js