ABCウェブエンジニアblog

Webデザイナー/エンジニア/講師のホームページ・ウェブサイト制作の備忘録

【HTML】サイトにファイルのダウンロードリンクを貼る方法

ダウンロードはこちらから的なファイルダウンロードのリンクを貼る方法

ウェブサイト上でユーザーに対して何らかのファイルのダウンロードを促す時があるかと思います。

今回はそういったダウンロードリンクを貼る方法について、記したいと思います。

 

HTMLのみで簡単ファイルダウンロードリンク貼り付け

ファイルダウンロードの基本形はaタグのhrefにファイル指定+download属性

もっとも簡単なダウンロードの方法としては、aタグのリンクのhrefにファイルの場所を指定し、download属性を指定します。

<a href="path/downloadfile.pdf" download>ダウンロードする</a>

download属性は特に何の値も不要です。

 

実際のファイル名とは別にダウンロード時のファイル名を指定可能

download属性の値指定によってダウンロードする際のデフォルトのファイル名を指定することも可能です。

<a href="downloadfile.pdf" download="default-name.pdf">ダウンロードする</a>

 

download属性無しの場合はそのままブラウザで開きます

PDFファイルなど、ブラウザ閲覧可能なファイルでわざわざダウンロードさせずそのままブラウザで開いて閲覧も可能です。

そのままブラウザで閲覧してもらえばよいという場合はdownload属性なしで通常のaタグにファイル指定しましょう。

<a href="path/downloadfile.pdf">PDFファイルを開く</a>

PDFであればChromeやEdge、Safariなどのブラウザであればそのままブラウザ内で開くかと思います。

その他のファイルについてはブラウザの対応次第ですので、ご注意ください。

 

exe等のファイル形式に注意

pdfやテキストファイルなど書類系のファイルは問題ないですが、exe等のプログラム実行系のファイルはセキュリティ喚起の対象になります。

最悪ダウンロードされない恐れもあるかと思いますのでご注意ください。

圧縮されたzipファイル形式であればそういったファイルでもダウンロード可能かと思いますので、必要な際にはzip圧縮などで対応をしましょう。

その他、ファイル容量が大きすぎる物も、サーバーへの負荷やユーザーの通信コストを考慮した上で問題ない範囲で添付しましょう。

 

ダウンロードリンクの実装はシンプル

制限なしの単純なダウンロードリンクであればこのように簡単に実装出来ます。

パスワードや会員のみなどの制限付きのダウンロードリンクとなるとサーバー知識が必要になるので、ぐっと難易度があがります。

自動で強制的にダウンロードが開始するようなものも同じく、一工夫必要です。

そういったものはまた改めて取り上げられたらと思います。

 

以上、ご参考になれば幸いです。

最後までお読みいただきありがとうございました!

 

▼Webクリエイターボックス管理者Manaさんの書いた、非常にわかりやすいWebデザイン本です。Webの基礎からHTML/CSSが学べます。

 

【html】ファイルをダウンロードさせる最も簡単な方法 – JavaScript不要!download属性使用!

arts-factory.net

PDFなどのファイルを強制的にダウンロードさせる3つ方法の比較

mamewaza.com

 

 

webabc.hatenablog.jp

webabc.hatenablog.jp

webabc.hatenablog.jp

webabc.hatenablog.jp