Table of Contents
Sometimes, you don't want to open a file in the browser, but rather, download it.
Thankfully, HTML supports making anchor links forcibly download the file.
In this post, we'll learn how we can make anchor links download a file instead of opening the file in the browser.
How to make anchor links download a file
To make an anchor link download a file, first start with the link you want to download.
In this case, let's assume the file you want to download is called file.mp3
.
HTML<a href="/path/to/file.mp3">
Download
</a>
Without doing anything more, clicking on that link will open it in the browser and the native audio player will play the file.
To make this link download the file, we need to add an attribute to the anchor link.
When you add the download
attribute, the browser will download the file instead of opening it in the browser.
Here's how our earlier link looks like with the download
attribute added:
HTML<a href="/path/to/file.mp3" download>
Download
</a>
Now, when you click on this link, the browser will forcibly download the file.
This is helpful for when you want to give the user something like a receipt for a purchase, or to allow people to download your resume.
Conclusion
In this post, we've seen how we can transform anchor links into download links in HTML.
Use this when opening the file in the browser is not what you want.
Hope this helped, and happy coding!
- Getting Started with TypeScript
- How to Install Node on Windows, macOS and Linux
- Getting Started with Solid
- Git Tutorial: Learn how to use Version Control
- Best Visual Studio Code Extensions for 2022
- Getting Started with Sass
- Learn how to use v-model with a custom Vue component
- Using Puppeteer and Jest for End-to-End Testing
- Build a Real-Time Chat App with Node, Express, and Socket.io
- Getting Started with React
- Setting Up Stylus CSS Preprocessor
- Setting Up a Local Web Server using Node.js