从浏览器下载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();
  }

2015-06-12 10:23:11

其他回答

React:在你的渲染方法中添加这个。

•状态中的对象:

<a
  className="pull-right btn btn-primary"
  style={{ margin: 10 }}
  href={`data:text/json;charset=utf-8,${encodeURIComponent(
  JSON.stringify(this.state.objectToDownload)
  )}`}
  download="data.json"
>
  DOWNLOAD DATA AS JSON
</a>

•道具中的物体:

<a
  className="pull-right btn btn-primary"
  style={{ margin: 10 }}
  href={`data:text/json;charset=utf-8,${encodeURIComponent(
  JSON.stringify(this.props.objectToDownload)
  )}`}
  download="data.json"
>
  DOWNLOAD DATA AS JSON
</a>

className和style是可选的，根据需要修改样式。

2018-10-02 14:53:50

这将是一个纯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

2015-06-09 09:09:24

对于那些只针对现代浏览器的人来说，简单、干净的解决方案:

function downloadTextFile(text, name) {
  const a = document.createElement('a');
  const type = name.split(".").pop();
  a.href = URL.createObjectURL( new Blob([text], { type:`text/${type === "txt" ? "plain" : type}` }) );
  a.download = name;
  a.click();
}

downloadTextFile(JSON.stringify(myObj), 'myObj.json');

2018-06-09 09:00:44

如果你更喜欢控制台片段，raser，而不是文件名，你可以这样做:

window.open(URL.createObjectURL(
    new Blob([JSON.stringify(JSON)], {
      type: 'application/binary'}
    )
))

2020-03-11 06:15:34