クライアントワークで、ウェブサイト上からPDFの資料ダウンロードを行う要件がたくさんある案件があり、そのときに使ったものをメモとして残しておきたいと思います。ウェブページ上から、PDFなどの外部ファイルにアクセスするにはaタグが使われるかと思います。ただ、下記のようにそのまま使うとブラウザ上でPDFページが表示されるケースもあります。 【HTML】※一部省略

<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属性を付与させるだけで、ユーザーにとっても親切な機能になります。ファイルの種類問わず、ダウンロードのトリガーとなる場合には忘れずに追記しておきたいですね。