aタグでPDFなどの外部ファイルをダウンロードさせるときに使うdownload属性
クライアントワークで、ウェブサイト上からPDFの資料ダウンロードを行う要件がたくさんある案件があり、そのときに使ったものをメモとして残しておきたいと思います。ウェブページ上から、PDFなどの外部ファイルにアクセスするにはaタグが使われるかと思います。ただ、下記のようにそのまま使うとブラウザ上でPDFページが表示されるケースもあります。
【HTML】※一部省略
aタグを使って外部ファイルをダウンロードさせる場合には、このようにdownload属性を付与させるだけで、ユーザーにとっても親切な機能になります。ファイルの種類問わず、ダウンロードのトリガーとなる場合には忘れずに追記しておきたいですね。
<a href="./PATH/sample.pdf"> PDFデータをダウンロードする </a>ブラウザ上でPDFが表示されるものの、そこからローカルPCにダウンロードできるようになっていますが、確実にダウンロードさせたい場合は一手間かかってしまいます。そんな時にはaタグに用意されている「download属性」を付与させることで、強制的にリンク先のファイルをダウンロードさせることができます。 【HTML】※一部省略
<a href="./PATH/sample.pdf" download="sample.pdf"> PDFデータをダウンロードする </a>download属性の値には、対象となるファイルを指定します。この時に拡張子まで含めることを忘れないよう気をつけます。これで実際に試してみると、ブラウザ上での挙動が変わりリンクのクリックですぐにファイルのダウンロードが開始されます。 ちなみにですが、download属性の値でファイル名を指定するのですが、値に指定したファイル名にリネームすることもできます。このようなデータを外部ファイルとして扱う場合に、ファイル名に全角文字をあてるのは推奨されていないので、ユーザーにとっても親切ですね。 【HTML】※一部省略
<a href="./PATH/sample.pdf" download="2020年2月度プレゼンテーション資料.pdf"> PDFデータをダウンロードする </a>ブラウザ上で試してみると、download属性で指定したファイル名にリネームされてダウンロードされることが確認できますね。
aタグを使って外部ファイルをダウンロードさせる場合には、このようにdownload属性を付与させるだけで、ユーザーにとっても親切な機能になります。ファイルの種類問わず、ダウンロードのトリガーとなる場合には忘れずに追記しておきたいですね。
sponserd
keyword search
recent posts
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
- ViteでReactとReact Routerを使ってみる
ViteでReactとReact Routerを使ってみる
- ViteでPugのコンパイル環境を導入する
ViteでPugのコンパイル環境を導入する
- ViteでMarkuplintとPrettierを使える環境を構築する
ViteでMarkuplintとPrettierを使える環境を構築する
- ViteでStylelintとESlintを使える環境を構築する
ViteでStylelintとESlintを使える環境を構築する
- マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
- ViteでVue.jsとVuex(Pinia)とVue Routerを使ってみる
ViteでVue.jsとVuex(Pinia)とVue Routerを使ってみる
categories