HTML5のBlobでhtml内で生成した動的データを保存する(angular)

HTML5のFileAPI機能にBlobという機能があります。（IE 10.0以降、Firefox 13.0以降、Chrome 20.0以降のはず） そのBlobを使って、サーバーを経由せずにhtmlだけで生成したデータをダウンロードする方法

今回Angularを使用しながらやってみた

JS側

//Blobを使ってバイナリデータを作る
//dataはjsonにしたいデータをString形式にする
var blob = new Blob([ data ], { "type": "application/json" });

//バイナリデータを元にURLObjectを作る
var url = (window.URL || window.webkitURL).createObjectURL(blob);

//出来たURLをhref要素にする
$scope.url = url;

html側

<a download="sample.json" ng-href ="{{ url }}">ダウンロード</a>

a tagのdownload要素を使用して、hrefに指定したものをダウンロードできるようになる。 この時ファイル名はsample.jsonになります。