PDFを開くかダウンロードするか、
HTMLの「a」タグでの設定方法と注意点
サイトを作っていく際に、何かしらのマニュアル類や書類的なものをPDFで確認できるように作るホームページがありますが、この時、PDFをどういう扱いにするかというのを実は悩ませます。
PDFのリンクをクリックやタップをした際、そのままPDFを開くのか、ダウンロードするのかどちらが良いのかというのはそのPDFの見せ方などによっても変わるかもしれません。
今回は、そんなPDFへのリンクをクリックした時に開くのかダウンロードするのか、それらをAタグを使って制御するための設定方法とPDFへのリンクなどに関するそもそもの注意点などについてもまとめています。
Aタグにそのまま記載すればPDFを開く指定に
通常のリンクと同じ、Aタグにそのまま記載をすれば、PDFを開く設定になります。
<a href="sample.pdf">サンプルPDF</a>こうすれば、クリック（タップ）すると、ブラウザのウィンドウやタブでPDFが開かれます。
実際のサンプル「裏方ワークスサンプルPDF」
ただ、上記のコードの場合、ページを見ているそのタブに開かれてしまうため、target属性で新しいタブで開くようにしておく方がユーザー的にも有り難いかもしれません。
<a href="sample.pdf" target="_blank">サンプルPDF</a>こう記載することで、今見ているページではなく新しいタブにPDFが開かれます。
実際のサンプル「裏方ワークスサンプルPDF」
Aタグのdownload属性でダウンロード指定に
通常のリンクと同じ書き方ですとブラウザで開かれますが、aタグのdownload属性を指定することでPDFを開かずにそのままダウンロードをさせる事が可能です。
<a href="sample.pdf" download>サンプルPDF</a>こう書く事で、PDFをダウンロード指定させられます。
実際のサンプル「裏方ワークスサンプルPDF」
download属性を使えばリネームしてのダウンロードが可能
downloadを指定すると、ブラウザ上で開かずにそのままダウンロードさせられることが可能ですが、この時、download属性にファイル名を指定することで、ダウンロードする際に自動的にリネームしてダウンロードさせる事が可能です。
<a href="sample.pdf" download="ファイル名">サンプルPDF</a>PDFをサーバーにアップロードする際は、英数字しか使えず日本語のファイル名は使えませんが、このようにdownload属性にファイル名を指定することで、実際にダウンロードする際にそのファイル名に変えてダウンロードされます。
下記が実際のサンプルですが、アップロードしているファイル名は、「urakata-sample-pdf.pdf」になりますが、download属性のファイル名に「裏方ワークスサンプルPDF」と指定したので、ダウンロードすると日本語ファイル名のPDFになっているはずです。
「裏方ワークスサンプルPDF」
外部のPDFをdownload属性で指定はできない
このdownload属性を指定する際の注意点としては、「同一オリジンのURL」のみ利用可能という定義がなされています。簡単に言ってしまえば、同じドメイン内で使いましょう。的な意味になります。
そのため、自分たちのリソースにあるPDFであれば問題なく利用できますが、外部にあるPDFを指定することはできないようになっています。参照や参考ファイルなどとして外部のPDFファイルを指定する際にdownload属性は使えませんので注意しておきましょう。
そもそもの大前提としてブラウザ設定が優先される
PDFについて、aタグでの設定として、ブラウザ上で開く、ダウンロードさせると2種類の指定を書いてきましたが、大前提の注意点としては見出しの通り、「ブラウザの設定が優先される」という事を覚えておく必要があります。
HTML側での処理が処理通り行われるのは、ブラウザ設定がデフォルトの場合になります。
そのため、仮にHTML側でダウンロード指定をしていたとしても、ユーザーがブラウザの設定でPDFはブラウザ上で開くに変更していた場合、download属性を付けたリンクであっても、ブラウザ上で開かれるようになります。
Chromeの設定箇所
かなり奥まった場所に設定項目があります。
- 右上の3点リーダーから「設定」をクリック
- メニューの「プライバシーとセキュリティ」をクリック
- 一番下の「サイトの設定」をクリック
- 一番下の「その他のコンテンツの設定」をクリック
- 「PDFドキュメント」をクリック
ここで、PDFをダウンロードするか、ChromeでPDFを開くかのどちらかを選択できます。
Edgeの設定箇所
こちらもかなり奥まった場所に設定項目があります。
- 右上の3点リーダーから「設定」をクリック
- 左メニューの「Cookieとサイトのアクセス許可」をクリック
- 「PDF ドキュメント」をクリック
ここで、常にPDFファイルをダウンロード かを選べます。
Firefoxの設定箇所
こちらは設定画面ですぐ設定が行えます。
- ブラウザのツールバーの「ツール」から「設定」をクリック
- 設定の一般が開いたらスクロールし、プログラムの項目の中の下にある「Portable Document Format（PDF）」の取扱い方法を選択
ここで、Firefoxで開くかダウンロードするか、毎回確認するかなど選べます。
リンクがPDFとわかるようにしておく事も必要
PDFを開くかダウンロードするかという事をテーマに解説してきましたが、PDFをリンクとして扱う際の注意点として、クリック・タップするまで、それがページへのリンクなのかPDFへのリンクなのかが見た目上ではわからないという点があります。
特にスマホの場合、リンク先のURLなどを確認するのは通常ではなかなかできないため、押してみないとどういうものかというのがわかりません。
PDFを開くリンクであろうと、ダウンロードするリンクであろうと、どういう設定がされているかなどは、ページを見ただけでなかなか把握することは困難です。
ユーザー側の視点にたった場合、ページへのリンクと思ってクリックしたら、PDFのダウンロードが始まった。というケースは誰もが経験した事があるかと思いますが、これが思っている以上に、ユーザーからするとイライラしたという回答も多かったりします。
特にスマホなどで、さらに外出時であったならPDFファイルがダウンロードされたりすると回線の容量などの問題もあるかもしれませんし、勝手にダウンロードされてどこに保存されてるかわからないまま削除できないというユーザーも多いので、注意が必要です。
PDFへのリンクを張る際には、必ず「このリンクはPDFですよ」といったような何かしら見たらわかる処置をしておくようにしましょう。
理想はPDFへのリンクの時だけPDFアイコンやマークを付けたりなどが理想ではありますが、コストや手間を考えるとそれだけのために制作などに事前に準備しておくのか…などの問題もありますので、少なくとも、リンク先がPDFだというコメントや（）などで注意を入れておくなどしておくと良いのではないでしょうか。
「裏方ワークスサンプルPDF」
※PDFファイルがダウンロードされます
この一文だけでも、あるかないかでユーザーのイライラ度は大きく変わることもありますので、何かしらPDFだとわかるものは、同時に入れておくように心がけましょう。
まとめ
PDFへのリンクについて記載をしてきました。
以外とPDFへのリンクなどは、マニュアル類、所定の用紙などとして実際のサイト運営としても使う機会は多いものになってきます。
PDFファイルをダウンロードさせるのか、ブラウザ上で開く設定にするのかというのは当然ながらサイトのポリシーや運営・管理方法などによっても変わるため、それぞれの設定方法などをしっかりした上で、どうするかを決められるのが一番理想ですね。
使い方も簡単ですし、そのままリンクを張れば開く、download属性を使えばダウンロード。ただしブラウザ設定がされていればそれが優先される。というのを覚えておけばまず間違える事もないはずです。
ただPDFリンクは思ってた行動と違い勝手にダウンロードされたと割と嫌われる事も多いものの1つのため、使う際には、これはPDFリンクですよ。という印や案内文などを入れておく方がユーザーのために良いと言えます。
以外と実務で使いたくて、特にダウンロードさせたいという指示も多かったりするので、しっかり使い方を覚えておきたいですね。
記事のシェアにご協力お願いします
