download
HTMLAnchorElement.download プロパティは、文字列で、リンク先リソースをブラウザーに表示するのではなくダウンロードすることを意図していることを示します。値がある場合は、ローカルファイルシステムのリソースのラベル付けに使用する既定のファイル名を指定します。 基になる OS で名前が有効なファイル名でない場合は、ブラウザーが調整します。
メモ: この値はダウンロードに使われないかもしれません。 この値により、ダウンロードが行われるかどうかを判別することはできません。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 15 | 13 | 20 | 10.1 | 18 | 10.3 | |
| HTML 属性 | ||||||
download | 14 | 18 | 20 | 10.1 | 18 | 13 |
download | 54 | 12 | 20 | 10.1 | 54 | 10.3 |
| DOM API | ||||||
| download は HTMLAreaElement インターフェイスのプロパティで、リンクされたリソースがブラウザーに表示されるのではなく、ダウンロードされることを示す文字列です。この値は、提案するファイル名を表します。名前が基盤となる OS で有効なファイル名ではない場合、ブラウザーはそれに応じて調整します。 | 54 | 13 | 20 | 10.1 | 54 | 10.3 |
| download は SVGAElement インターフェイスのプロパティで、リンクされた URL をダウンロードとして扱うべきであることを示す文字列を返します。 | 142 | 142 | 20 | | 142 | |
| その他 | ||||||
svg.elements.a.download | | | 20 | | | |
注釈 1件
実装メモ
- Chrome 65 から、クロスオリジンダウンロードは `<a>` 要素ではサポートされなくなりました。
注釈 5件
実装メモ
- Edge 79以降、クロスオリジンダウンロードは `<a>` 要素ではサポートされません。
- Edge 14（ビルド14357）までは、データURIをダウンロードしようとするとEdgeがクラッシュしていました（バグ7160092）。
- Edge 17 またはそれ以前のバージョンで、ファイル名を決定するために属性の値に従っていませんでした（バグ 7260192）。
制限事項
- このブラウザでは部分的にしか実装されていません
削除済み
- このバージョンで機能が削除されました (18)
注釈 1件
実装メモ
- Chrome Android 65 以降、クロスオリジンダウンロードは `<a>` 要素ではサポートされません。
基本構文
HTML
<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>ライブデモ
Downloadable SVG badge
Offer a generated SVG badge as a downloadable file without a separate endpoint.
プレビュー全画面表示
実務での使いどころ
-
download の活用
HTMLAnchorElement.download プロパティは、文字列で、リンク先リソースをブラウザーに表示するのではなくダウンロードすることを意図していることを示します。
注意点
- 古いブラウザでは対応していない場合がある。
アクセシビリティ
- スクリーンリーダーでの読み上げを確認すること。