HTMLのdownload属性がめちゃくちゃ便利

かゆいところに手が届く そんな言葉が当てはまります。

サイト制作に慣れてくると、さまざまなファイルを配布したり共有したりしたくなることがあります。そのような場合に役立つのが、HTML5で追加された「download」属性です。

通常、PDFファイルなどをリンクとして提供すると、ブラウザでそのまま開かれてしまいます。

ダウンロードしたい時はオプションから「保存する」を選ぶなど少し手順が増えます。

しかし、この属性を使えば「a」タグに「download」属性を追加するだけで、PDFファイルをクリック（またはタップ）した時に保存先を指定するダイアログが表示されるようになります。

使い方は2つの方法があります。個人的には見た目もすっきりする最初の方法を好んで使っています。

<a href="PDFファイルのURL" download>PDFファイル</a>

もう一つの方法だとダウンロードするファイルの名前を指定することが出来ます。日本語ファイルとかだと、リンクは英文で保存時に日本語を指定できるので需要はありそう。download=””の値が空の場合、aタグのhref=””で設定したファイル名になります。

<a href="PDFファイルのURL" download="保存する時のファイル名">PDFファイル</a>

リンクのファイルは、PDFだけでなく画像ファイルなども指定できます。
この記事を書いている時点ですでにほとんどのブラウザでサポートされているので安心して使えます。

注意点

この属性は外部ドメインのファイルをリンクしても有効になりませんので気をつけてください