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

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

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

HTML

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

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

HTML

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

※ download属性を追加します。

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

HTML

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

※ downloadの属性値は省略してもオッケーです。

対応ブラウザ

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

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

さいごに

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

デザコト

あ、いいな、と思うWebデザインを紹介しています。デザインの参考に。やさしいデザインが多いです。Webデザインギャラリー『デザインのこと - Web design gallery』を運営しています。

Googleさんの
おすすめ

5

/

22

2024

Googleさんの
おすすめ

5

/

22

2024

デザインの記事

UNBOX 2nd
  • 2024.05.20New
  • UNBOX 2nd
  • 国内、海外のウェブデザイン、パソコン・タブレット・スマートフォンでも見やすいレスポンシブ対応の「あ、いいな」と思うウェブデザインを集めています。
  • デザインのこと – Web design gallery
早朝始発の殺風景