HTML5 でのリソースのダウンロード - a[ダウンロード]

Chrome で、HTML 仕様の a 要素に対する新しい download 属性がサポートされるようになりました。この属性を使用すると、そのリソースが参照するリソースは、ブラウザに移動するのではなく、ブラウザによってダウンロードされることになります。

[リソースのダウンロード] で次の操作を行います。

たとえば、「Download me」というリンクをクリックすると、href の値に移動するのではなく、「MyGoogleLogo.png」として .png がダウンロードされます。この場合のマークアップは次のとおりです。

<a href="http://web-central.appspot.com/.../web-fundamentals-icon192x192.png" download="WebfundamentalsLogo">download me</a>

a[download] の真のメリットは、blob: URL および filesystem: URL URL を使用する場合です。これにより、ユーザーはアプリ内で作成または変更されたコンテンツをダウンロードできます。

完全なデモ

注意すべき点は、上記の例では、ウェブサイトに関して画像の提供元が同じであるということです。別の提供元の画像のリンクを使用しようとすると、そのリンクがダウンロード リンクではなくナビゲーション リンクとして機能しない場合があります。これは、ブラウザの多くのバージョンがクロスオリジン ファイルのダウンロード ポリシーをサポートしていないためです。たとえば、65 より前のバージョンの Chrome ではクロスオリジン ファイルをダウンロードすることができ、それ以降のバージョンではサポートを終了しました。詳しくは、こちらをご覧ください。Content-Disposition ヘッダーを使用して、他のオリジンから強制的にダウンロードさせることができます。

ブラウザのサポート: 現在の Chrome Dev チャンネル リリース(14.0.835.15 以降)のみがこの属性をサポートしています。