HTML5のBlobで、動的データのダウンロードを、わずか3行で実装できた。
JavaScriptなどにより、クライアント側で動的なデータを作成し、それをローカル環境に保存したいと思い、サンプルプログラムを作成してみました。実装技術として、HTML5のFile API機能におけるBlobを使いました。
わずか3行で実装できてしまうのですね。便利ですね。さらに、HTML5なので、最近の主要ブラウザ(IE 10.0以降、Firefox 13.0以降、Chrome 20.0以降のはず)では動作しますし、現在動作していないブラウザ(Safari?)でも、HTML5対応が進めば、動作するようになるはず。
では、作成してみたサンプルプログラムを説明します。
ポイント
ポイントは、この3行です。content変数には、ダンロードしたいファイルのテキストデータが入っています。id変数は、ダウンロード用リンクのaタグを特定するid属性です。
var blob = new Blob([ content ], { "type" : "text/plain" }); window.URL = window.URL || window.webkitURL; $("#" + id).attr("href", window.URL.createObjectURL(blob));
1行目で、contentのデータを、Blobオブジェクトとして保持しています。2行目では、Chrome, Safariにおいて、URLオブジェクトの変数名が異なるので、名前を統一しています。3行目では、Blobオブジェクトを識別するURLを生成し、jQueryを使用して、aタグのhref属性に設定しています。
これにより、ユーザがダウンロード用リンクをクリックすると、content変数の内容が、ダウンロードされます。ただし、ブラウザや設定によっては、ダウンロードではなく、別ウインドウやタブで開かれるかもしれません。
作成したプログラム
作成したプログラムをブラウザで表示した画面イメージです。テキストエリアに入力したテキストを、ダウンロードリンクから、ローカル環境にダウンロードする事ができます。
HTMLです。
<textarea id="content" cols="40" rows="5">Hello, World! こんにちは、みなさん!</textarea><br> <a id="download" target="_blank">ダウンロード</a>
JavaScriptです。
(function() { // Aタグのhref属性に、Blobを設定する。 // Blobに含めるデータは、引数で指定する。 function setBlobUrl(id, content) { // 指定されたデータを保持するBlobを作成する。 var blob = new Blob([ content ], { "type" : "text/plain" }); // Aタグのhref属性にBlobオブジェクトを設定する。 window.URL = window.URL || window.webkitURL; $("#" + id).attr("href", window.URL.createObjectURL(blob)); } $("#content").keyup(function(){ setBlobUrl("download", $("#content").val()); }); $("#content").keyup(); })();
今回作成したプログラムは、jsdo.it上で作成しました。次のリンクから、参照可能です。興味が湧いた方は、Forkして遊んじゃって下さい。