我有以下代码,可让用户下载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>
<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”只是结果文件的示例名称。
storageObj
与其他提议的方法相比,此方法具有以下优点:
我需要这种行为而无需显式单击,因为我想在某个时候从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(); }