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

一尘不染

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

javascript

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

我进行了一些研究，并且该研究声称可以工作，但是我的代码没有任何区别。

我在代码中缺少什么吗？

阅读 731

2020-05-01

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

2020-05-01