Sometimes you want to offer a downloadable resource from your website after a user goes through a funnel or satisfies a certain condition like form sign up. And the downloadable resource is usually in a PDF format presented at the very end of the funnel as a clickable link that leads to the file.
However, linking directly to your PDF file would open it like a regular page once the link to it is clicked. This could present a problem in your funnel as the user can grab the direct link from the address bar and can share it to other people – skipping the funnel entirely.
How to avoid this from happening? Easy! Make the link trigger a download instead of loading the file in the browser.
How to make a download link with HTML
The trick is to use an <a> element attribute that signals the browser to trigger a download instead of loading up the file in view. And this <a> attribute is called “download”.
Here’s how the download link HTML markup looks:
<a href="direct-link" download="filename">Where:
- Direct-link is the link to the resource to be downloaded. Ex. https://website.com/file/resource.pdf
- Filename is the filename override, or simply the name to be given to the file when download. Ex. “Web-Dev-Cheat-Sheet” – so when resource.pdf gets downloaded, it’s downloaded by the user as “Web-Dev-Cheat-Sheet.pdf”.
Which file or resource works with the <a> download attribute?
Basically, any file that doesn’t trigger the browser file download by default. This includes resources like images (.png, .jpeg, etc.) and others.
Of course, there are other programmatic ways to trigger a download and the implementation depends on the web language in use – you can use Javascript, for instance, to trigger a file download after a button click, but it’s beyond the scope of this article.
Leave a Reply