この記事はHTML5 Advent calendarの16日目の記事です。

HTML5からaタグにdownloadという属性が指定可能になったようです。
この属性が指定されたaタグは、href属性の値をブラウザで開くのではなく、リンク先をファイルとしてダウンロードします。

今までcanvasで画像を生成した画像など、jsで生成したファイルをユーザに保存させるにはwindow.openにdata urlを渡して新窓で表示させ、ユーザに右クリ等で保存してもらう方法しか知らなかったのですが、
aタグのdownload属性がまさにやりたいことドンピシャだったので備忘録を残します。

デモ

MDNにまさにドンピシャなデモがあったので、自作デモは割愛します。
canvasで生成した画像を新窓ではなくファイルダウンロードさせるデモです。

このとき、サーバに対して一切リクエストを飛ばしていないことがポイントです

よいこと

• わざわざバイナリをechoするだけのサーバを立てなくて良い
• 上記の構築や管理・メンテの手間がなくなる
• jsだけで完結するのでコードのまとまりが良くなる

あたりが個人的に良いと思うところです。

jsからaタグを生成し、ファイル名を指定してダウンロード

function download(uri, filename) {
  filename = filename || 'file';

  var link = document.createElement('a');
  link.download = filename;
  link.href = uri;
  link.click();
}

download('data://text/html,Hello world!!', 'dummy.html');

のように、location.hrefなどと大差ないくらいの手軽さでサッと書けるのが魅力だと思います。
これでフロントエンドだけで完結するアプリケーションがより作りやすくなりました。

ブラウザ互換

Can I useによると、IEとSafari(Mac、iOS）は最新版でも動きません。
Chrome、Firefox限定のアプリケーションなどでは使用できそうです。
あと機種に依りそうですが、Androidのブラウザでは動作するようです。