Home Writing Reading

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

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

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

Some notes on the download attribute:

  • It only works for same-origin URLs, or blob: and data: schemes.
  • A filename in the Content-Disposition header takes priority over the filename we specified in the download attribute.
  • 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.

  • MDN. (2022-04-14). a[download]. Link
  • Steve Sewell. (2022-04-04). Tweet
  • Erfan Ebrahimnia. (2022-04-04). Tweet

  • Loading next post...
  • Loading previous post...