Ownedmedia ウェブ制作に役立つコンテンツを発信中!

HTML 2020.02.15

aタグでPDFなどの外部ファイルをダウンロードさせるときに使うdownload属性

Tags:

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

この記事を書いた人

オガワ シンヤ

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

  • Twitter

コメントフォーム

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。

内容に問題なければ、お名前・ハンドルネームとメールアドレスを入力いただき、下記の「コメントを送信」ボタンを押してください。

CAPTCHA


この記事もよく読まれています

Scroll to Top
ご質問・ご相談はありませんか ?