til / Download attribute on links
Let’s say I’ve worked hard on a report and I want everyone to download it, so I add a link on my website.
<a href="/my_report_final_final_v2.pdf"> My report </a>
This is fine, but the browser might open the PDF inside the browser when I wanted it to be downloaded. By adding the download attribute to the link, we can tell the browser to treat it as a download.
<a href="/my_report_final_final_v2.pdf" download> My report </a>
This saves the file on the user’s computer, but I would like to hide the fact that the file went through several revisions. Luckily, the download attribute accepts a value which suggests (see notes) the filename.
<a href="/my_report_final_final_v2.pdf" download="my_report.pdf"> My report </a>
Some notes on the download attribute:
- It only works for same-origin URLs, or
blob:anddata:schemes. - A
filenamein theContent-Dispositionheader takes priority over the filename we specified in thedownloadattribute. - Browsers treat the attribute differently. Some save it automatically, some may prompt the user, or it might even be opened automatically.
Browser support is great if you don’t need to support IE.