HTML5 a タグの download 属性

これまでウェブサイトで、ユーザーにファイルをダウンロードさせたいと思ったら Content-Disposition を使う他ありませんでした。

しかし、HTML5 では a タグに download 属性を設定することでダウンロード操作を指定することが可能になりました。

a タグの download 属性とは？

HTML5 では a 要素 (アンカー要素、アンカータグ、a タグ) に download 属性が追加されました。

a タグでは、他のページへのリンクを設定して、クリックすることによって、そのページへナビゲートされる (移動する) というのが基本動作です。

しかし、download という属性を設定することによって、他のページへのナビゲートではなく、リンクされたリソースをダウンロードするということを指定することができます。

例えば、次のように記載することによって、リンクされた PDF ファイル foo.pdf ファイルは、クリックによってブラウザの画面でそのまま開きたいわけではなく、ユーザーにダウンロードして欲しいということを記述したことになります。

<a href="foo.pdf" download>PDF Document 1</a>

a タグの download 属性は主要なブラウザでサポートされています。(次のリストのバージョンは、デスクトップブラウザのバージョンです。)

尚、IE ではバージョン 11 でもサポートされていません。

上でダウンロード操作を指定するために、download 属性を設定することを説明しました。

<a href="foo.pdf" download>PDF Document 1</a>

この時、例えばダウンロード時のデフォルトファイル名を指定するために download 属性に値を設定することができます。

<a href="foo.pdf" download="sample.pdf">PDF Document 1</a>

download 属性にファイル名を設定しない時は、次の場所からファイル名が決められます。実際にどの値が使われるかはブラウザに依存します。

以上、HTML5 のダウンロード属性について説明しました。