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

javascript json

2022-08-30 01:08:00

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

我进行了一些研究，这个声称有效，但我看不出我的代码有任何区别。

我的代码中是否遗漏了某些内容？

感谢您阅读我的问题：）

答案 1

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

网页：<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();

在本例中，是要存储的 js 对象，而“scene.json”只是结果文件的示例名称。storageObj

与其他建议的方法相比，此方法具有以下优点：

无需单击 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();
  }

答案 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，他是上述代码的作者**