0%

Programmingプログラミングナレッジ

Posted:2020.02.15

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

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

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

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

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

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

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】