レシピ

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

  • このエントリーをはてなブックマークに追加

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

この記事のポイント

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

目次

ファイルのダウンロードについて

リンクは別ページへの移動のみでなく、ファイルのダウンロード機能としても使用できます。

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

ダウンロードリンクの設定方法はa要素download属性を指定します。

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

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

コード例

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

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

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

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

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

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

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

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

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

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

ダウンロードで警告メッセージが表示されている例
ダウンロードで警告メッセージが表示されている例
  • このエントリーをはてなブックマークに追加
前のページへ 一覧ページへ一覧 次のページへ