【HTML】ファイル(PDF)を表示せずにダウンロードする

【HTML】ファイル(PDF)を表示せずにダウンロードする
きのこさん
あのーPDFもダウンロードできるようにしたいんですけどー
きのこさん
あー、なるほどー、エクセルとかワードと同じ感じってことですねー

リンクをクリック! → ブラウザに表示!

クリックするとPDFが表示されます

HTML

<a href="/sample.pdf" target="_blank">PDF</a>

リンクをクリック! → ダウンロード!

クリックするとPDFがダウンロードされます

HTML

download属性を追加します。

<a href="/sample.pdf" download="sample.pdf" target="_blank">PDF</a>

リンクをクリック! → ダウンロード!(downloadの属性値は省略してもオッケーです。)

クリックするとPDFがダウンロードされます

HTML

downloadの属性値は省略可なので下記でもオッケーです。

<a href="/sample.pdf" download target="_blank">PDF</a>

対応ブラウザ

download属性の対応ブラウザを検証してみました。(2022年2月)

ブラウザどうかな?コメント
Chrome問題なし
Firefox問題なし
(このファイルをどのように処理するか選んでください、とポップアップが出る)
Safari問題なし
Edge問題なし
IE×ダメです
(ブラウザに表示される、その後ダウンロードは可)

さいごに

きのこさん
ふむふむ、なーるほどー
きのこさん
クリームパンを買いに行きましょー
デザインのこと - Web design gallery
いつかのこと

おすすめ

Googleさんのおすすめ

Googleさんのおすすめ

デザインの記事

すべてのお母さんに、ありがとう。| ポーラ公式 エイジングケアと美白・化粧品
すべてのお母さんに、ありがとう。| ポーラ公式 エイジングケアと美白・化粧品
あったらいいなと思うもの/窓の家と生活
『未来のミライ』、何度も見てしまう