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

商品の詳細な情報や、会社案内等の配布資料をPDFファイル等を、WEBサイトへアップロードし、ダウンロードをしてもらう、といった仕組みはよく目にするかと思います。

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

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

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

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

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

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

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

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

上記のコードではまず、href属性にダウンロードさせたいファイル名とそれまでのパスを記述します。

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

次に「download属性」というものを先程記述したaタグに追加してダウンロードをさせる設定を行います。
このダウンロード属性がない状態だと、記述したURLへページが遷移をしてしまうだけになります。

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

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

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

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

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

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

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

気を付けておくべきポイント

download属性を使う際には、以下の事に気を付けておくとよいでしょう。

ダウンロードに適していない拡張子について

download属性を使う事で様々なファイルをダウンロードさせる事ができる一方で、あまりダウンロードに適していない拡張子のファイルも存在し、注意が必要です。
.exeファイルや.swfファイル、ものによっては.csvアフィル等も、ダウンロードをする際に警告のポップアップアラートが表示されます。

こうしたファイルをダウンロードさせたい場合には、zip形式にしてファイルを圧縮させた後、ファイルをアップロードすると、ダウンロードする際に警告のポップアップアラートが出ずにダウンロードが出来ます。

download属性は同じドメインでのみ有効です

ダウンロードが出来るファイルは、同じドメインの同じサーバーの中にあるファイルだけになります。
外部サイトのファイルをダウンロードさせる事は出来ません。

まとめ

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

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