How to Make Anchor Link Download in HTML
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
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:
<a href="/path/to/file.mp3" download>
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.
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
- Managing PHP Dependencies with Composer
- Getting Started with Express
- Create an RSS Reader in Node
- How to Serve Static Files with Nginx and Docker
- How to deploy a .NET app using Docker
- Best Visual Studio Code Extensions for 2022
- Getting Started with Deno
- Using Puppeteer and Jest for End-to-End Testing
- Building a Real-Time Note-Taking App with Vue and Firebase
- Setting Up Stylus CSS Preprocessor
- Getting Started with Moon.js