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
- URL with
For example, you can use an origin-relative URL like so:
<a href="/path/to/image.jpg" download>Download</a>
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 final part of the URL path;
- The media type (such as from the
Content-Typeheader, the start of a
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
- If the header specifies a disposition of
inline, some browsers (such as Chrome & Firefox 82+) may prioritize the
downloadattribute 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.