【HTML】ファイルをダウンロードさせるリンクの設置方法

商品の詳細なスペックや、会社の資料などをPDFファイルにして、WEBサイトへアップロードしたり、場合によってはダウンロードをしてもらう、といった仕組みはよく目にするかと思います。

画像等の素材サイトでは、データをダウンロードしてもらうために、ダウンロードボタンが設置されています。

このように、PDFや画像エクセルなどのドキュメントファイルをWEBサイトからダウンロードさせたいと考えた事はありませんか？

今回は、WEBサイトからファイル等をダウンロードさせるリンクの設置方法についてご紹介していきます！

関連記事：WEBページの裏側、ソースコードとHTMLの簡単な説明

まずはリンクタグを設置します

ファイルをダウンロードさせるには、リンクタグ（aタグ）を使用します。

以下のコードのように、ますはaタグをマークアップします。

<a href="ダウンロードしたいファイルのurl">ここにテキストが入ります。</a>

上記のタグにdownload属性を追加します

ただaタグを設置してファイルのURLを入力しただけでは、そのURLへ遷移をしてしまうだけになります。ダウンロードをさせるには、「download属性」というものをaタグに追加します。

以下のようにコードをマークアップしてきます。

<a href="ダウンロードしたいファイルのurl" download>ここにテキストが入ります。</a>

これで、テキストをクリックすると、アップロードしたファイルがダウンロードされるようになります。

ダウンロードファイル名を変更してダウンロードさせたい場合

ダウンロードファイル名を変更してダウンロードさせたい場合は、以下のようにdownload属性を変更します。

<a href="download/test.pdf" download="テスト.pdf">ここにテキストが入ります。</a>

上記のようにdownload属性変更する事で、「test.pdf」をダウンロードすると、「テスト.pdf」というファイル名に変更されてダウンロードが行われます。

まとめ

download属性を使ったファイルをダウンロードさせるリンクの設置方法についてご紹介いたしましたが、いかがだったでしょうか？

編集自体は簡単なものですので、是非一度お試し下さい！