HTML5のFile API:Writerで、動的データのダウンロードを実装してみた。
前回の記事では、HTML5のBlobを使用して、動的データのダウンロードを行いました。非常に簡単に実装できたのですが、ひとつ残念だったのは、ファイル名を指摘できないことでした。
今回、HTML5のFile API:Writerを使って、ファイル名を指定して、動的データのダウンロードを行なってみました。難しいことなく、出来上がったのですが、現状では、対応ブラウザがGoogle Chromeだけとなってしまいました。File API:Writerは、各種ブラウザの実装が普及していないようですね。
では、作成してみたサンプルプログラムを説明します。
画面イメージ
作成したプログラムをブラウザで表示した画面イメージです。ダウンロード時のファイル名と、ファイルの内容を指定するテキストボックスがあります。ダウンロードリンクから、ローカル環境にダウンロードする事ができます。
プログラム
HTMLです。
<input id="fname" type="text" value="sample.txt" /><br> <textarea id="content" cols="40" rows="5">Hello, World! こんにちは、みなさん!</textarea><br> <a id="download" target="_blank">ダウンロード</a>
ユーザ入力のファイル名とファイル内容から、ファイルを作成し、ダウンロードリンクに紐付けるJavaScriptです。jQuery 1.8.0を使っています。
ブラウザが管理する仮想的なファイルシステムに対して、ファイル名を指定してファイルを作成しています。そのファイルに対するURLを取得すると、URLのファイル名部分が指定したファイル名になり、その名前でダウンロード出来るようになりました。
function setFileUrl(id, fname, content) { window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem; window.requestFileSystem(TEMPORARY, 1024*1024, function(fileSystem){ // ファイル新規作成(上書き) fileSystem.root.getFile(fname, {create: true, exclusive: false}, function(fileEntry){ // ファイル書き込み fileEntry.createWriter(function(fileWriter){ var blob = new Blob([ content ], { "type" : "text/plain" }); fileWriter.write(blob); // ファイル書き込み成功イベント fileWriter.onwriteend = function(e){ console.log("ファイル書き込み成功"); }; // ファイル書き込み失敗イベント fileWriter.onerror = function(e){ console.log("ファイル書き込み失敗"); }; }); // リンクへ紐付ける $("#" + id).attr("href", fileEntry.toURL()); }, function(error){ console.log("error.code=" + error.code); }); }); }
上記JavaScript処理と、HTMLを関連付ける処理です。
function setSampleFileUrl() { setFileUrl("download", $("#fname").val(), $("#content").val()); } $("#fname").keyup(function(){ setSampleFileUrl(); }); $("#content").keyup(function(){ setSampleFileUrl(); }); setSampleFileUrl();
今回作成したプログラムは、jsdo.it上で作成しました。次のリンクから、参照可能です。興味が湧いた方は、Forkして、色々動かしてみて下さい。