如何使用 Javascript 将 JSON 响应下载到 Excel？答案

【问题标题】：How to download JSON response to Excel using Javascript?如何使用 Javascript 将 JSON 响应下载到 Excel？
【发布时间】：2020-02-22 16:29:02
【问题描述】：

我没有使用 ajax 的经验。我遇到了一个问题，我想要一个按钮将表单数据发布到 url (API)，它给出 json 响应：

{  
    "employee": {  
        "name":       "sonoo",   
        "salary":      56000,   
        "married":    true  
       }  
   }

现在按下提交按钮应该可以选择将上面的 json resposne 下载到 excel 吗？谁能帮助或指导我应该学什么来解决这个问题？

【问题讨论】：

标签： javascript html json ajax

【解决方案1】：

如果你已经有了 JSON 代码，你可以阅读这个答案：How to download JSON object as a file - StackOverflow。

如果需要将其转换为 CSV 文件，可以使用此手动转换：JSON to CSV Converter。

如果您确实需要使用 JavaScript 将 JSON 代码转换为 CSV，我认为这个答案会有所帮助：How to convert JSON to CSV with JavaScript。

【讨论】：

【解决方案2】：

首先，您需要学习如何使用 AJAX 发送请求和接收响应。当您知道如何正确接收 AJAX 响应时，您可以执行以下操作以将 JSON 响应下载为 Excel 文件：

您可以使用 Blob 和 URL.createObjectURL() 创建一个链接以将响应下载为一份文件。

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
	function download(){
    var jsonResponse = '{ "employee": { "name": "sonoo", "salary": 56000, "married": true } }' ;
    
    if (confirm('Download response to Excel file?')) {
		  var fileName = "";
		  var columnNames = [];
		  var records = [];
		  var responseExcel = "";
		  var jsObject = JSON.parse( jsonResponse );

			for (var key in jsObject) {
				fileName = key + ".csv";
				if (jsObject.hasOwnProperty(key)) {
					for (var key2 in jsObject[key]) {
						columnNames.push(key2);
						if (jsObject[key].hasOwnProperty(key2)) {
							records.push(jsObject[key][key2]);
						}
					}
				}
			}
			
			responseExcel = columnNames.join(";") + "\n";
			responseExcel += records.join(";");
			
			var blob = new Blob([responseExcel], {type: "text/plain"});
			var url  = URL.createObjectURL(blob);

			var a = document.createElement('a');
			a.href        = url;
			a.download    = fileName;
			a.textContent = "Download " + fileName;

			document.getElementById('json').appendChild(a);
		} else {
			// Do something else ...
		}
	}
  </script>
</head>
<body>

<h1>My Page</h1>
<p>Some paragraph.</p>

<button onclick="download();">Submit</button><br><br>
<div id="json"></div>

</body>
</html>

【讨论】：