HTML & CSS

最終更新日:
公開日:

レシピ

リンク

ファイルをダウンロードするリンクを設定する

ファイルのダウンロードリンクを設定する方法について解説します。

この記事のポイント

  • ファイルのダウンロードリンクを設置する
  • 直接ダウンロード以外のダウンロード方法を設定する

目次

ファイルのダウンロードを設定する

a要素を使ったリンクはHTMLのみでなく、ファイルのダウンロードリンクとしても使用できます。
設定方法はa要素download属性を指定します。

以下はWindows10のEdgeでダウンロードリンクをクリックしたときの表示例です。

Edgeでダウンロードリンクをクリックしたときの表示例

ダウンロードリンクの設定例

具体的にコードを使って解説します。

コード例

<p><a href="pdf/test.pdf" download="sample.pdf">PDFファイルをダウンロード</a></p>

このリンクを押すと、download属性で指定したファイル名でPDFファイルがダウンロードされます。

href属性で指定したファイル名とは別であることに注意してください。
今回はあえてdownload属性href属性のファイル名を別々にしていますが、同じにしてファイル名を合わせることも可能です。

IE11でダウンロードリンクをクリックした例

ちなみに、download属性がない場合はPDFファイルがそのままブラウザで開かれます。

download属性がない場合はPDFファイルがそのまま開かれる

PDFファイルはブラウザによる表示からもダウンロードすることが可能です。
もし、リンクをクリックしたらすぐにダウンロードが開始される形ではなく、閲覧してからダウンロードする流れにしたい場合はあえてdownload属性を指定しないようにします。

PDFと画像以外のファイルについては、download属性がない場合はhref属性に記載されたファイル名でダウンロードが開始されます。

リンクするファイル形式について

リンクするファイル形式はPDFファイルに限らず、画像ファイルやオフィスの文書ファイル、zipなどの圧縮ファイルも設定できます。
ただし、プログラムファイル(.exe.swf)はブラウザやウイルス対策ソフトの関係で警告メッセージが表示されたり、ダウンロードが無効になることがあります。

ダウンロードで警告メッセージが表示されている例