为了账号安全,请及时绑定邮箱和手机立即绑定

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

/ 猿问

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

九州编程 2019-09-19 16:49:05

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


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


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


感谢您阅读我的问题:)


查看完整描述

3 回答

?
慕姐829404

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


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

  }


查看完整回答
反对 回复 2019-09-19
?
交互式爱情

找到答案。


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,他是上面代码的作者**


查看完整回答
反对 回复 2019-09-19
?
狐的传说

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


查看完整回答
反对 回复 2019-09-19

添加回答

回复

举报

0/150
提交
取消
意见反馈 邀请有奖 帮助中心 APP下载
官方微信