You can use the HTML5 download
attribute on an <a>
(anchor) element which would prompt the user to save the linked resource instead of navigating to it. However, you must note that it will only work in the following cases:
- same-origin resource, or;
- URL with
blob:
scheme, or; - URL with
data:
scheme.
For example, you can use an origin-relative URL like so:
<a href="/path/to/image.jpg" download>Download</a>
Or, a blob
/data
scheme resource like so:
<a href="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" download > Download </a>
You could also, optionally, specify a value for the download
attribute which would be used as the file name:
<a href="/path/to/image.jpg" download="foo.jpg">Download</a>
Please note that some browsers might not honor the suggested filename in the download
attribute for cross-origin requests.
Based on the code above, the filename will be foo.jpg
instead of image.jpg
. Another thing to note here is that, you may safely omit the file extension. When no filename or file extension is specified in the attribute, the browser will suggest a filename/extension, generated from the following:
- The
Content-Disposition
HTTP header; - The final part of the URL path;
- The media type (such as from the
Content-Type
header, the start of adata:
URL, orBlob.type
for ablob:
URL).
For example, the following would result in the filename "foo.jpg
" (where the file extension is derived from the URL path):
<a href="/path/to/image.jpg" download="foo">Download</a>
Please note that, if the filename has the characters "/
" and "\
", they will be converted to underscores (_
). Additionally, browsers may adjust the suggested filename if it contains characters that the filesystem forbids.
The presence of the Content-Disposition
header may affect the behavior of the download
attribute in the following scenarios:
- If the header specifies a filename, it would take precedence over the filename (if any) specified in the
download
attribute; - If the header specifies a disposition of
inline
, some browsers (such as Chrome & Firefox 82+) may prioritize thedownload
attribute and treat it as a download, while others may prioritize the header and display the content inline.
This post was published by Daniyal Hamid. Daniyal currently works as the Head of Engineering in Germany and has 20+ years of experience in software engineering, design and marketing. Please show your love and support by sharing this post.