こんにちは、岐阜・名古屋を拠点に全国各地からご依頼いただくWEBサイトを制作しているフリーランスエンジニアの寺井です。

WEBサイトでリンク設定されているファイルをブラウザで表示せず、ダウンロードさせたいという場面があるかと思います。
ExcelファイルやWordファイルなどブラウザが対応していない形式のファイルの場合は強制的にダウンロードされますが、PDFファイルなどブラウザで開くことが出来るファイルの場合はブラウザで表示されます。
PDFなどをブラウザで開かず、ダウンロードさせるにはdownload属性を使えば簡単に実装することが出来ます。
この記事では、download属性の記述方法から使う場合の注意点をご紹介したいと思います。

download属性を指定してファイルをダウンロードする方法

それではdownload属性の使い方をご紹介します。

download属性の記述方法

download属性は、<a>タグに指定します。
そして、href属性にダウンロードさせたいファイルのリンクを設定します。
download属性が無ければ、ブラウザ上で開きますが、download属性を指定するとブラウザ上では開かず、そのままダウンロードさせることが出来ます。

<a href="example.jpg" download>ファイルをダウンロードする</a>

IEなど一部のブラウザは対応していないですが、2024年4月現在、主要なブラウザは対応しています。

ダウンロード後のファイル名を指定する

download属性にファイル名を設定するとダウンロード後のファイル名をリネームしてダウンロードさせることが出来ます。

<a href="example.pdf" download="rename.pdf">ファイルをダウンロードする</a>

上の例の場合、もともとのファイル名はexample.pdfですが、ダウロード後のファイル名はrename.pdfになります。
download属性の値が空の場合はサーバー上に上がっているファイル名のままでダウンロードされます。

download属性を使用する時の注意点

download属性を使う上で一部注意点があります。

外部サイトのファイルはダウンロード出来ない

download属性は同一オリジンのURLのみ利用可能となっています。つまり、同一サイト内のファイルのみで利用出来る、外部サイトのデータはdownload属性を指定してもダウンロードすることは出来ません。

ダウンロード後のファイル名を指定する時は拡張子を揃える

download属性にダウンロード後のファイル名を指定する時は、リネーム後のファイルの拡張子はリネーム前のファイルの拡張性と同じにするようにします。

拡張子を変えてもダウロードすることは出来ますが、拡張子が変わってしまうことで正しく開くことが出来なくなってしまう恐れがあります。

<!-- 拡張子を揃える -->
<a href="example.pdf" download="rename.pdf">ファイルをダウンロードする</a>

<!-- 拡張子が揃っていないとファイルを開けない恐れがある -->
<a href="example.pdf" download="rename.jpg">ファイルをダウンロードする</a>

ブラウザで開けない拡張子は強制的にダウンロードされる

ブラウザが対応していない拡張子の場合は、download属性を指定していなくても強制的にダウロードされます。
download属性を指定するのは通常はブラウザで表示されるファイルをダウロードさせたい場合に使用するようにします。

<!-- .xlsx、.docxなどはdownload属性が無くてもダウンロードされる -->
<a href="example.xlsx">ファイルをダウンロードする</a>

<a href="example.docx">ファイルをダウンロードする</a>

まとめ

いかがでしたか？
download属性を指定することで簡単にファイルをダウンロードさせることが出来ますね。
使う上で一部注意点はありますが、その点だけ気を付けて使用してみて下さい。