HTML&CSS

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

HTML&CSS

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

HTMLでPDFファイルをダウンロードしてもらう場合、方法は2通りあります。
一つ目は「リンクをクリックして、直接ダウンロードする方法」。
二つ目は「リンクをクリックして、ファイルの表示を確認してダウンロードする方法」。
それでは見ていきましょう。

リンクをクリックして直接ダウンロードする方法

<a href="pdf/sample.pdf" download="sample.pdf">PDFをダウンロードする</a>


リンクをクリックして直接ダウンロードする場合は、a要素にdownload属性を追加します。
この属性に指定した名前でPDFファイルがダウンロードされます。

href属性にはPDFファイルをアップロードしているディレクトリを指定します。

リンクをクリックしてファイルの表示を確認してダウンロードする方法

<a href="pdf/sample.pdf">PDFをダウンロードする</a>

download属性を指定していない場合、PDFをアップロードしているディレクトリへリンクします。
そしてここからダウンロードリンクをクリックしてPDFファイルをダウンロードします。

ダウンロードするまで二度手間になってしまいますが、あえてファイルを確認してからダウンロードしたい場合はこのように設定します。

まとめ

2通りのダウンロードリンクの設定方法についてご紹介しました。
download属性を使うと、a要素をクリックするだけでダウンロードが行えるので便利ですね。
しかし、ユーザーにとってはダウンロードする前に「どのようなPDFファイルなのか?」確認したい場合もあります。
Webサイトに訪れるユーザーの特徴や年齢層などを意識して、どちらの設定が良いのか検討してみましょう。

あなたにおすすめの記事