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

更新日:2022年11月5日 /  投稿日:2022年11月1日

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

商品の詳細なスペックや、会社の資料などを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属性を使ったファイルをダウンロードさせるリンクの設置方法についてご紹介いたしましたが、いかがだったでしょうか?

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

この記事を書いた人

KNOWLEDGE BASEの中の人

KNOWLEDGE BASEの中の人

2013年よりWEB制作会社に入社し、デザイン・コーディングからディレクションと幅広く従事。

その他の関連記事はこちら