我有以下代码让用户下载 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 数据的页面,而不是下载它。
我进行了一些研究,发现 this one声称可以工作,但我看不出我的代码有什么不同。
我的代码中是否缺少某些内容?
感谢您阅读我的问题:)
最佳答案
这就是我为我的应用程序解决它的方法:
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”只是生成文件的示例名称。
与其他提议的方法相比,此方法具有以下优点:
我需要这种行为而无需显式点击,因为我想在某个时候从 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();
}
https://stackoverflow.com/questions/19721439/