【コピペOK】HTML aタグのdownload属性でファイルをダウンロードさせる方法

ファイルをダウンロードできるリンクは、aタグにdownload属性を付けるだけで簡単に実装できます。
たとえば PDFマニュアルや画像をユーザーに配布したいとき、以下のように書くだけでOKです。

<a href="./pdf/sample.pdf" download="sample.pdf">クリックでダウンロード</a>

このようにシンプルなコードですが、さらにファイル名を指定できる便利さや、一部ブラウザでの注意点もあります。
この記事では、aタグのdownload属性の使い方から注意点まで、初心者にもわかりやすく解説していきます。

aタグのdownload属性とは？
download属性の基本的な書き方（サンプルコード付き）
download属性を使うときの注意点
【まとめ】aタグのdownload属性で簡単にファイル配布リンクが作れる

aタグのdownload属性とは？

aタグのdownload属性とは、リンクをクリックしたときに「ページを開く」のではなく「ファイルをダウンロードさせる」ためのHTML属性です。

通常、以下のようなリンクはクリックするとファイルがブラウザ上で表示されます。

<a href="./pdf/sample.pdf">クリックで表示</a>

この場合、PDFであればブラウザ内で開き、画像ならそのまま表示されます。
一方で、download属性を付与すると動作が変わり、リンク先のファイルを直接ダウンロードできるようになります。

<a href="./pdf/sample.pdf" download="manual.pdf">クリックでダウンロード</a>

上記のコードでは、ファイルをクリックすると「manual.pdf」という名前で保存されます。
つまりaタグのdownload属性を使えば、

ユーザーに「保存」させたいファイルを直接ダウンロード可能
ダウンロード時のファイル名を任意で指定できる

という便利な仕組みを簡単に実装できます。

download属性の基本的な書き方（サンプルコード付き）

download属性は、aタグの中に追加するだけで使えます。
基本の書き方は以下です。

<a href="ファイルのパス" download="任意のファイル名">リンクのテキスト</a>

それぞれの役割

href属性 … ダウンロードさせたいファイルのパスを指定（相対パスでも絶対パスでもOK）
download属性 … ダウンロード時のファイル名を指定（空にすると元のファイル名が使われる）

サンプル1：基本的な使い方

<a href="./pdf/sample.pdf" download="sample.pdf">PDFをダウンロード</a>

クリックすると「sample.pdf」という名前で保存されます。

サンプル2：ダウンロード時に別名で保存

<a href="./pdf/sample.pdf" download="manual.pdf">マニュアルをダウンロード</a>

元のファイル名はsample.pdfですが、保存時は「manual.pdf」になります。

サンプル3：download属性を空にした場合

<a href="./pdf/sample.pdf" download>PDFを保存</a>

この場合、ダウンロード時のファイル名は元のファイル名（sample.pdf）がそのまま使われます。

ポイント

download属性を指定しない場合 → ブラウザでファイルが「表示」される
download属性を指定した場合 → ファイルが「保存」される

download属性を使うときの注意点

aタグのdownload属性はとても便利ですが、いくつか制限や注意点があります。
実装前に知っておくことで「思った通りに動かない」トラブルを防げます。

同一ドメインのファイルしかダウンロードできない

download属性が有効になるのは同じドメイン上のファイルだけです。
外部サイトのファイルをリンクしても、強制的にダウンロードはできず、通常のリンクとして動作します。

<!-- OK：同一サイトのファイル -->
<a href="/pdf/sample.pdf" download="guide.pdf">ダウンロード</a>

<!-- NG：外部サイトのファイル（download効かない可能性大） -->
<a href="https://example.com/sample.pdf" download="guide.pdf">ダウンロード</a>

一部のブラウザでは未対応

download属性はほとんどの主要ブラウザでサポートされていますが、IEや古いバージョンのブラウザでは対応していません。
未対応ブラウザでは「ダウンロード」ではなく、ファイルがそのまま開いてしまう挙動になります。

ブラウザ対応状況はCan I use download?で確認できます。

ファイル形式によっては意図通りにならない場合がある

PDFや画像などの一部ファイルは、ブラウザが標準でプレビュー機能を持っているため、環境によっては自動で開いてしまうことがあります。
その場合は右クリック → 名前を付けて保存で対応するか、サーバー側の設定（HTTPヘッダーでContent-Disposition: attachmentを付与）を検討する必要があります。