download
The download attribute suggests that a linked resource should be downloaded rather than opened in place. It can also provide a preferred file name for the saved file.
Overview
The download attribute suggests that a linked resource should be downloaded rather than opened in place. It can also provide a preferred file name for the saved file.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 15 | 13 | 20 | 10.1 | 18 | 10.3 | |
| HTML attribute | ||||||
download | 14 | 18 | 20 | 10.1 | 18 | 13 |
download | 54 | 12 | 20 | 10.1 | 54 | 10.3 |
| DOM API | ||||||
| The download property of the HTMLAreaElement interface is a string indicating that the linked resource is intended to be downloaded rather than displayed in the browser. The value represent the proposed name of the file. If the name is not a valid filename of the underlying OS, browser will adjust it accordingly. | 54 | 13 | 20 | 10.1 | 54 | 10.3 |
| The download property of the SVGAElement interface returns a string indicating that the browser should treat the linked URL as a download. | 142 | 142 | 20 | | 142 | |
| Other | ||||||
svg.elements.a.download | | | 20 | | | |
- Starting in Chrome 65, cross-origin downloads are not supported on the `<a>` element.
- Starting in Edge 79, cross-origin downloads are not supported on the `<a>` element.
- Until Edge 14 (build 14357), attempting to download data URIs caused Edge to crash (bug 7160092).
- Edge 17 or older didn't follow the attributes' value to determine filename (bug 7260192).
- This browser only partially implements this feature
- This feature was removed in a later browser version (18)
- Starting in Chrome Android 65, cross-origin downloads are not supported on the `<a>` element.
Syntax
<a href="/files/data.csv" download="2024-report.csv">
Download
</a>
<a href="/files/report.pdf" download>PDF</a>
<a href="/files/data.csv" download="2024-report.csv">
Download
</a>
<!-- ファイル名を指定 -->
<a href="/files/data.csv" download="2024-report.csv">
Report
</a>Live demo
Direct file download
Use the download attribute with a data URL and a suggested filename.
Download card grid
Pair labels, file sizes, and download links in a simple asset list.
Downloadable SVG badge
Offer a generated SVG badge as a downloadable file without a separate endpoint.
Use cases
Exported reports
Let users save invoices, CSV exports, or generated files with a predictable file name.
Asset downloads
Offer templates, PDFs, or starter files as direct downloads instead of opening them in a new tab.
Cautions
- Not every browser and origin combination treats download consistently, so test the exact hosting setup you use.
- Make the file type and size obvious before download so the action feels intentional.
Accessibility
- Link text should say that a download starts and ideally mention the file format.
- Do not rely on icon-only affordances for download actions.
Related links
Powered by web-features