kurukuru-papaのブログ

主に、ソフトウェア開発に関連したメモを書き溜めたいと思います。

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して、色々動かしてみて下さい。

動作環境

対象ブラウザ

  • Chrome 20.0以降
  • ※動作確認したブラウザは以下のみです。

動作確認済みブラウザ

動作しないことを確認したブラウザ

利用ライブラリ