[HTML5] Aタグのdownload属性が便利

ビジネスWEBサービスを作っていると、CSVダウンロードを求められる事が多々あります。 また、特定の画像やテキストなど、PCユーザーは、ダウンロードして自己端末管理したがります。 サービス設計者として考えた時に、ダウンロードしてデータ管理をローカルで行なってもらえるのは、サーバー負荷の観点で考えると悪くはありません。 しかし、そんなダウンロードをする際に、普通にAリンクでサーバーに置かれているファイルにアクセスすると、そのままページ遷移して、テキストファイルやPDFなどが表示されて「ダウンロードしないやん！」となってしまう事があります。 そんな時は、Aタグにdownload属性をつけるだけで、ダウンロードダイアログが表示して、ファイル名まで任意の文字列を指定する事ができる様になります。

aタグのdownload属性の使い方と概要

Aタグにdownload属性を付けてダウンロードする際のファイル名を指定するだけなんですが、通常Aタグと合わせて３パターンを比較して理解しましょう。 <a href="./test.txt">直リンク</a> <a href="./test.txt" download="テスト">ダウンロード</a> <a href="./test.txt" download="テスト" data-type="text/plane">type付きダウンロード</a> 直リンクは、そのままページ遷移してしまいますが、download属性を付けた場合は、ダウンロードダイアログが表示されるのが分かります。 念の為、"Can I use"で利用できるブラウザとバージョンを調べてみました。 PC系はほぼ最新であれば使える様ですね。 IEは残念ですが、分かっていた気もするので、改めてIEはWEBサービス系に向いていない事が理解できました。 モバイル系はあきらめましょう。そもそもファイルという概念がクラウドにした方がいいので・・・

こんな場合に便利

この機能、もう一つ便利な特性があり、拡張子を自動で付与してくれるという点です。 元のファイルの拡張子をdownload属性のファイル名の後ろに自動的に追加してくれます。 なので、少しめんどくさい拡張子を調べて付与するといった作業が不要になります。 ちなみに、"data-type"属性は必須かというとそうでもないのですが、お作法として追加しておいた方が、ブラウザによってコケる可能性があるので、この辺はサービス構築者の思考で判断してください。