内部データをファイルとしてダウンロードできるようにする

HTML5のFile APIを使ってファイルを作成する方法をベースに、内部データをファイルとしてダウンロードできるようにする。GUIの一貫性を考慮し、ボタンクリックでダウンロードを開始する。

  • データをJSON形式にし、さらにBlobオブジェクト化する

  • 元のデータをgGpsDataとすると、JSON.stringify()でJSON形式に変換できる。さらにBlob()コンストラクタを使って、ファイル化する。

    function writeGpsData(){
        // ファイルにしたい内容をJSON形式でシリアライズ
        var jsonString = JSON.stringify(gGpsData); 
        //var jsonString = JSON.stringify(gGpsData,null,2); // 空白を2つ入れる場合
        // タイプを指定してBlobオブジェクトを生成。対象を [ ] で囲む。
        var blob = new Blob([jsonString],{type:'text/plain'});
    }
    

    関数名はwriteGpsData()だが、実際にファイルをwriteしているわけではない。

  • ファイルとしてダウンロードできるようにする

  • ファイルのダウンロードは、ブラウザ的にはファイルへのリンクとして実現される。すなわち a要素に href 属性を指定することで、画面には「ファイルへのリンク」が表示される。そこで、あらかじめ空の a要素を用意しておき、href,target,downloadの各属性値をJavaScript で書き足す。
    HTML:

    <a id="btnDownloadJson">download</a>
    

    上記で作成したBlobオブジェクトへのリンクは、createObjectURL(blob) で得られるので、コードは以下のようになる。
    JavaScript:

    $('#btnDownloadJson').attr('href',URL.createObjectURL(blob));
    $('#btnDownloadJson').attr('target','_blank');
    $('#btnDownloadJson').attr('download',getJsonFileName(gFileNameGpsOrg));
    

    わかりやすさを重視してjQueryで記述している。
    download属性を指定すると、リンクをクリックすると与えられた名前をファイル名として、即座にダウンロードが開始される仕様となっている。ただし、現在のところ、chromeは仕様通り動作するが、firefoxではダウンロードではなく、内容がブラウザに表示されるに留まる。(そのため、target=_blankとして新しいウィンドウ(またはタブ)が開くようにしている。)

  • リンクをボタンにする

  • リンクをボタンのような見た目にするライブラリは非常に多いが、ここではjQuery easyUIを使う。

    <a id="btnDownloadJson" class="easyui-linkbutton" data-options="iconCls:'icon-search'">download</a>
    

    これで見た目はボタンになり、クリックするとダウンロードが始まる(firefoxではファイルの表示)が、これはブラウザの既定の動作であるため、ここで書いたJSON化やa要素への属性指定はあらかじめ行っておく必要がある

カテゴリー: Tips タグ: , パーマリンク

内部データをファイルとしてダウンロードできるようにする への1件のフィードバック

  1. ピンバック: 内部データをファイルとしてダウンロードできるようにする | Try Lifelog : ちゅどん道中記

コメントは停止中です。