从浏览器下载JSON对象作为文件

Question

我有以下代码让用户下载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数据，而不是下载它。

我进行了一些研究，这个人声称可以工作，但我认为我的代码没有任何区别。

我在代码中遗漏了什么吗？

感谢您阅读我的问题:)

Answer 1

这就是我为我的应用程序解决它的方法：

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();

  }

Answer 2

找到答案。

var obj = {a: 123, b: "4 5 6"};

var data = "text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(obj));

$('<a href="data:' + data + '" download="data.json">download JSON</a>').appendTo('#container');

似乎对我来说很好。

**所有的归功于@ cowboy-ben-alman，他是上面代码的作者**

Answer 3

这将是一个纯粹的JS版本（改编自牛仔版）：

var obj = {a: 123, b: "4 5 6"};

var data = "text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(obj));

var a = document.createElement('a');

a.href = 'data:' + data;

a.download = 'data.json';

a.innerHTML = 'download JSON';

var container = document.getElementById('container');

container.appendChild(a);

http://jsfiddle.net/sz76c083/1