【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×ダメです
(ブラウザに表示される、その後ダウンロードは可)

さいごに

きのこさん
ふむふむ、なーるほどー
きのこさん
クリームパンを買いに行きましょー

おすすめ

Googleさんのおすすめ

Googleさんのおすすめ

デザインの記事

good eighty%
  • 2023.01.25New
  • good eighty%
  • 国内、海外のウェブデザイン、パソコン・タブレット・スマートフォンでも見やすいレスポンシブ対応の「あ、いいな」と思うウェブデザインを集めています。
  • デザインのこと – Web design gallery
good eighty%
  • 2023.01.25New
  • good eighty%
  • 国内、海外のウェブデザイン、パソコン・タブレット・スマートフォンでも見やすいレスポンシブ対応の「あ、いいな」と思うウェブデザインを集めています。
  • デザインのこと – Web design gallery
ちょっと思い出しただけ
『点』、登場人物は3人だけ