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

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

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

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

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

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

コード例

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

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

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

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

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

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

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

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

こちらの記事は役に立ちましたか？

コメントありがとうございます！
運営の参考にさせていただきます。