SYNCERのロゴ
アイキャッチ画像

download属性 - リンク先ファイルのダウンロード

a要素のdownload属性はハイパーリンクを、リンク先ファイルをダウンロードする仕様に変更する属性です。基本的に、JavaScriptなどで作成したBlobや、インラインのData URI、同じオリジンの元にあるリソースに対して有効です。

概要

要素
a要素
DOM Interface
HTMLAnchorElement.download
仕様書
https://html.spec.whatwg.org/multipage/links.html#attr-hyperlink-download

ローカルに保存されるファイル名を表す文字列。ただし、同じオリジン元のリソースでないと値は無効になる。値は省略でき、この属性を持つだけで、そのハイパーリンクはダウンロードする仕様になる。

<a href="./image.png" download>画像を保存</a>
<a href="./image.png" download="hoge.png">画像をhoge.pngという名前で保存</a>

説明

download属性の基本的な値の指定方法を紹介します。

値なし

値を指定しない場合、リソース本来のファイル名として保存されます。ブラウザによっては、同じオリジンにあるリソースしか対応していません。

<!-- image.pngとして保存される -->
<a href="./image.png" download>画像を保存</a>
<p>同じオリジンにあるリソースです。</p>
<p>
	<a href="../image.png" download>画像を保存</a>
</p>

<p>
	<img src="../image.png" width="120" height="120">
</p>

<p>別のオリジンにあるリソースです。Safari、Firefoxではダウンロードできません。</p>
<p>
	<a href="https://example.com/index.html" download>HTMLを保存</a>
</p>

同じオリジンにあるリソースです。

画像を保存

別のオリジンにあるリソースです。Safari、Firefoxではダウンロードできません。

HTMLを保存

値あり

値を指定した場合、その値のファイル名として保存されます。ただし、リソースが同じオリジンの元にない場合、この値は無視されます。別のドメイン下にあるリソースは、本来のファイル名でしか保存されないということです。

<!-- hoge.pngとして保存される -->
<a href="../image.png" download="hoge.png">画像を保存</a>
<p>同じオリジンにあるリソースです。</p>
<p>
	<a href="../image.png" download="hoge.png">画像を保存</a>
</p>

<p>
	<img src="../image.png" width="120" height="120">
</p>

<p>別のオリジンにあるリソースです。Safari、Firefoxではダウンロードできません。download属性の値は無視されます。</p>
<p>
	<a href="https://example.com/index.html" download="hoge.html">HTMLを保存</a>
</p>

同じオリジンにあるリソースです。

画像を保存

別のオリジンにあるリソースです。Safari、Firefoxではダウンロードできません。download属性の値は無視されます。

HTMLを保存

機能の対応表

分かりやすいように、ブラウザごとの機能の対応状況を表にまとめました。2017年10月時点のデータです。

ブラウザダウンロード (同オリジン)ダウンロード (別オリジン)値の指定 (同オリジン)値の指定 (別オリジン)
Chrome×
Firefox××
Safari××

サポート状況

クリックすると、バージョンごとの対応状況を確認できます。

ChromeFirefoxSafariEdgeIEOperaiOS SafariAndroid
20+ 10+× 15+× 4.4+
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年9月15日 (金)
コンテンツを公開しました。