【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
いつかのこと

カテゴリー

人気記事

【CSS】ハンバーガーメニュー実装サンプル集（クリック時のエフェクトも集めました）
【jQuery】アコーディオン実装サンプル10選
【jQuery】スライダープラグイン「slick」実装サンプル集
【jQuery】ページ内リンクでスムーズスクロール（スクロール位置の調整も簡単にできる）
【CSS】シンプルなボタンデザイン実装サンプル集

おすすめ

かんれん

みる

みる

みる

みる

Googleさんのおすすめ

人気記事

みる

みる

みる

みる

more

Googleさんのおすすめ

デザインの記事

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