从浏览器下载JSON对象作为文件
我有以下代码让用户下载数据string在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的某个点自动触发下载。
find了答案。
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');
似乎为我工作得很好。
**所有功劳都归于@牛仔 – 本 – 阿尔曼，谁是上面的代码的作者**
这将是一个纯粹的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);
以下为我工作：
/* function to save JSON to file from browser * adapted from http://bgrins.github.io/devtools-snippets/#console-save * @param {Object} data -- json object to save * @param {String} file -- file name to save to */ function saveJSON(data, filename){ if(!data) { console.error('No data') return; } if(!filename) filename = 'console.json' if(typeof data === "object"){ data = JSON.stringify(data, undefined, 4) } var blob = new Blob([data], {type: 'text/json'}), e = document.createEvent('MouseEvents'), a = document.createElement('a') a.download = filename a.href = window.URL.createObjectURL(blob) a.dataset.downloadurl = ['text/json', a.download, a.href].join(':') e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null) a.dispatchEvent(e) }
然后像这样调用它
saveJSON(myJsonObject, "saved_data.json");
链接的download属性是新的，并且在Internet Explorer中不受支持（请参阅此处的兼容性表格）。 对于这个问题的跨浏览器的解决scheme，我会看看FileSaver.js
您可以尝试使用原生JavaScript API – Blob和FileSaver.js saveAs。 根本不需要处理任何HTML元素 –
var data = { key: 'value' }; var fileName = 'myData.json'; // Create a blob of the data var fileToSave = new Blob([JSON.stringify(data)], { type: 'application/json', name: fileName }); // Save the file saveAs(fileToSave, fileName);
尝试设置另一个MIMEtypes： exportData = 'data:application/octet-stream;charset=utf-8,';
但在保存对话框中可能存在文件名的问题。
我最近不得不创build一个button来下载一个大型表单的所有值的json文件。 我需要这个与IE / Edge / Chrome的工作。 这就是我所做的：
function download(text, name, type) { var file = new Blob([text], {type: type}); var isIE = /*@cc_on!@*/false || !!document.documentMode; if (isIE) { window.navigator.msSaveOrOpenBlob(file, name); } else { var a = document.createElement('a'); a.href = URL.createObjectURL(file); a.download = name; a.click(); } } download(jsonData, 'Form_Data_.json','text/json');
在边缘有一个文件名和扩展名的问题，但在写这篇文章的时候，这似乎是Edge的一个错误，它将被修复。
希望这有助于某人
