[解決済み] ブラウザからJSONオブジェクトをファイルとしてダウンロードする。

質問

csvファイルでデータ文字列をダウンロードできるようにするために、以下のコードを用意しました。

exportData = 'data:text/csv;charset=utf-8,';
exportData += 'some csv strings';
encodedUri = encodeURI(exportData);
newWindow = window.open(encodedUri);

クライアントがコードを実行すると、空白のページを生成し、csvファイルのデータのダウンロードを開始することは問題なく動作します。

そこで、JSONオブジェクトを使って次のようにやってみました。

exportData = 'data:text/json;charset=utf-8,';
exportData += escape(JSON.stringify(jsonObject));
encodedUri = encodeURI(exportData);
newWindow = window.open(encodedUri);

しかし、JSONデータが表示されたページが表示されるだけで、ダウンロードはしていない。

いろいろ調べたら これ は動作すると主張していますが、私のコードには何の違いも見られません。

私のコードに何か見落としがあるのでしょうか？

質問を読んでくれてありがとうございます:)

どのように解決するのですか？

私のアプリケーションでは、このように解決しました。

HTMLです。 <a id="downloadAnchorElem" style="display:none"></a>

JS（純粋なJS、ここではjQueryではない）。

var dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(storageObj));
var dlAnchorElem = document.getElementById('downloadAnchorElem');
dlAnchorElem.setAttribute("href",     dataStr     );
dlAnchorElem.setAttribute("download", "scene.json");
dlAnchorElem.click();

この場合 storageObj は保存したいjsオブジェクト、"scene.json"は出来上がったファイルの名前の一例です。

この方法は、他の提案されている方法と比較して、次のような利点があります。

• HTML要素をクリックする必要がない
• 結果は、あなたが望むような名前になります
• jQuery不要

私は、jsからある時点で自動的にダウンロードを開始したいので、明示的なクリックなしでこの動作が必要でした。

JSソリューション(HTML不要)。

  function downloadObjectAsJson(exportObj, exportName){
    var dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(exportObj));
    var downloadAnchorNode = document.createElement('a');
    downloadAnchorNode.setAttribute("href",     dataStr);
    downloadAnchorNode.setAttribute("download", exportName + ".json");
    document.body.appendChild(downloadAnchorNode); // required for firefox
    downloadAnchorNode.click();
    downloadAnchorNode.remove();
  }