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

■ よくあるお悩み

「HTML(WordPress)内に、PDFをダウンロードするリンクを設置したいのだけど、どう実装すればよいのだろう?」

というお悩み。

PDFをダウンロードさせるリンクを設置する頻度は少ないため、私自身、実装方法を忘れて、毎回のごとく調べるため、自分用の備忘録も兼ねて記事を書きました。

PDFファイルをダウンロードする方法は大きく分けて2つです。
1.リンクをクリックして、ダウンロードする方法
2.リンクをクリックして、ファイルの内容を確認してダウンロードする方法

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

まず1つ目の、リンクをクリックして、ダウンロードする方法です。

サンプルコードは以下になります。

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

href属性には、PDFファイル(〇〇.pdf)をアップロードしている場所までのパスを記述します。

a要素に、download属性を追加で記述します。

ファイル名を指定して、リンクをクリックして、ダウンロードする方法

例えば、アップロードしたPDFのファイル名は、【 dummy.pdf 】だけど、ダウンロードさせたいのPDFファイル名は【 ダミー.pdf 】にしたい場合。

ようするに、アップロードしたPDFのファイル名とダウンロードしたときのPDFのファイル名を変更したい場合。

このような場合は、download属性に【 任意の名前.pdf 】というように記述します。

サンプルコードは以下になります。
(アップロードしたPDFのファイル名は【 dummy.pdf 】、ダウンロードしたときのPDFのファイル名は【 ダミー.pdf 】

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

 

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

次に2つ目の、リンクをクリックして、ファイルの内容を確認して、ダウンロードする方法

サンプルコードは以下になります。

<a href="pdf/dammy.pdf" target="_blank" rel="noopener">PDFをダウンロードする</a>

一度PDFの内容を表示させるため、二度手間ですが、「どんな内容が記載されているのか?」がユーザーに確認していただくことができます。

私が受けている制作案件では、基本的に【 download属性を指定しない(一旦、PDFへリンクさせる) 】ようにしています。

ユーザー視点で考えた時に、PDFファイルをダウンロードする前に「どのようなPDFファイルなのか?」を確認したい場合もあるため、このようにしております。

【 target=”_blank” 】を使用する時の、1つの注意点

【 target=”_blank” 】を使用する際は、セキュリティーの観点から、【 rel=”noopener” 】をセット記述しましょう。

「【 rel=”noopener” 】って何?もう少し深く知りたい!」や「【 rel=”noopener noreferrer” 】ではないの?」という悩みは、以下の記事を参考にしてください。

rel=”noopener noreferrer”の意味とアフィリエイト広告への影響

私の方針としましては別タブで開く際は、WordPressで【 リンクを新しいタブで開く 】で設定した際に、自動付与される【 rel=”noopener” 】に合わせております。
(*検証環境 ・WordPress 6.0.2 ・旧エディター(クラシックエディター))

 

SNSでもご購読できます。

コメントを残す

前の記事

次の記事