第一種導出excel無需自己設置，直接根據json生成 （缺點：json數據全部展示，且只能按獲取數據的順序顯示）
//json數據轉excel function JSONToExcelConvertor(JSONData, FileName) { //先轉化json var arrData = typeof JSONData != 'object' ? JSON.parse(JSONData) : JSONData; var excel = '<table>'; var row = "<tr>"; //設置表頭 var keys = Object.keys(JSONData[0]); keys.forEach(function (item) { row += "<td>" + item + '</td>'; }); //換行 excel += row + "</tr>"; //設置數據 for (var i = 0; i < arrData.length; i++) { var row = "<tr>"; for (var index in arrData[i]) { console.log(arrData[i][index]); //var value = arrData[i][index] === "." ? "" : arrData[i][index]; row += '<td>' + arrData[i][index] + '</td>'; } excel += row + "</tr>"; } excel += "</table>"; var excelFile = "<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:x='urn:schemas-microsoft-com:office:excel' xmlns='http://www.w3.org/TR/REC-html40'>"; excelFile += '<meta http-equiv="content-type" content="application/vnd.ms-excel; charset=UTF-8">'; excelFile += '<meta http-equiv="content-type" content="application/vnd.ms-excel'; excelFile += '; charset=UTF-8">'; excelFile += "<head>"; excelFile += "<!--[if gte mso 9]>"; excelFile += "<xml>"; excelFile += "<x:ExcelWorkbook>"; excelFile += "<x:ExcelWorksheets>"; excelFile += "<x:ExcelWorksheet>"; excelFile += "<x:Name>"; excelFile += "{worksheet}"; excelFile += "</x:Name>"; excelFile += "<x:WorksheetOptions>"; excelFile += "<x:DisplayGridlines/>"; excelFile += "</x:WorksheetOptions>"; excelFile += "</x:ExcelWorksheet>"; excelFile += "</x:ExcelWorksheets>"; excelFile += "</x:ExcelWorkbook>"; excelFile += "</xml>"; excelFile += "<![endif]-->"; excelFile += "</head>"; excelFile += "<body>"; excelFile += excel; excelFile += "</body>"; excelFile += "</html>"; var uri = 'data:application/vnd.ms-excel;charset=utf-8,' + encodeURIComponent(excelFile); var link = document.createElement("a"); link.href = uri; link.style = "visibility:hidden"; link.download = FileName + ".xls"; document.body.appendChild(link); link.click(); document.body.removeChild(link); }
第二種json排序，可手動設置數據顯示(缺點：無法對列間距進行設置，生成的excel會擠在一起)
//導出訪問路徑Excel function exportPathMethod(data) { //要導出的json數據 var jsonData = []; for(var i=0; i<data.length ; i++){ jsonData.push({ index :i+1, title: data[i].title, url: data[i].url, createTime :data[i].createTime }); } //列標題，逗號隔開，每一個逗號就是隔開一個單元格 let str = `序號,標題,地址,時間\n`; //增加\t為了不讓表格顯示科學計數法或者其他格式 for(let i = 0 ; i < jsonData.length ; i++ ){ for(let item in jsonData[i]){ str+=`${jsonData[i][item] + '\t'},`; } str+='\n'; } //encodeURIComponent解決中文亂碼 let uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str); //通過創建a標簽實現 var link = document.createElement("a"); link.href = uri; //對下載的文件命名 link.download = "json數據表.xls"; document.body.appendChild(link); link.click(); }
第三種方法 是為了解決返回的json數據中一些數據不想展示給用戶時采取的措施（轉載：https://blog.csdn.net/qq_34623560/article/details/79928248）
<html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script> <script type="text/javascript" src="js/JSONToExcelConvertor.js" ></script> <script type="text/javascript"> $(document).ready(function(){ $('#wwo').click(function(){ //測試的json數據 var data3=[{"id":10000,"username":"user-0","sex":"女","city":"城市-0","sign":"簽名-0","experience":255,"logins":24}, {"id":10001,"username":"user-1","sex":"男","city":"城市-1","sign":"簽名-1","experience":884,"logins":58} , {"id":10002,"username":"user-2","sex":"女","city":"城市-2","sign":"簽名-2","experience":650,"logins":77}] //自定義標題欄 var title=['用戶名','性別','城市','簽名','經驗'] //自定義過濾欄（不需要導出的行） var filter=['id','logins'] //原始導出 JSONToExcelConvertor(data3,"report"); //自定義導出 //JSONToExcelConvertor(data3,"report",title,filter); }); }); </script> </head> <body> <input type="button" id="wwo" value="導出" /> </body> </html> function JSONToExcelConvertor(JSONData, FileName,title,filter) { if(!JSONData) return; //轉化json為object var arrData = typeof JSONData != 'object' ? JSON.parse(JSONData) : JSONData; var excel = "<table>"; //設置表頭 var row = "<tr>"; if(title) { //使用標題項 for (var i in title) { row += "<th align='center'>" + title[i] + '</th>'; } } else{ //不使用標題項 for (var i in arrData[0]) { row += "<th align='center'>" + i + '</th>'; } } excel += row + "</tr>"; //設置數據 for (var i = 0; i < arrData.length; i++) { var row = "<tr>"; for (var index in arrData[i]) { //判斷是否有過濾行 if(filter) { if(filter.indexOf(index)==-1) { var value = arrData[i][index] == null ? "" : arrData[i][index]; row += '<td>' + value + '</td>'; } } else { var value = arrData[i][index] == null ? "" : arrData[i][index]; row += "<td align='center'>" + value + "</td>"; } } excel += row + "</tr>"; } excel += "</table>"; var excelFile = "<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:x='urn:schemas-microsoft-com:office:excel' xmlns='http://www.w3.org/TR/REC-html40'>"; excelFile += '<meta http-equiv="content-type" content="application/vnd.ms-excel; charset=UTF-8">'; excelFile += '<meta http-equiv="content-type" content="application/vnd.ms-excel'; excelFile += '; charset=UTF-8">'; excelFile += "<head>"; excelFile += "<!--[if gte mso 9]>"; excelFile += "<xml>"; excelFile += "<x:ExcelWorkbook>"; excelFile += "<x:ExcelWorksheets>"; excelFile += "<x:ExcelWorksheet>"; excelFile += "<x:Name>"; excelFile += "{worksheet}"; excelFile += "</x:Name>"; excelFile += "<x:WorksheetOptions>"; excelFile += "<x:DisplayGridlines/>"; excelFile += "</x:WorksheetOptions>"; excelFile += "</x:ExcelWorksheet>"; excelFile += "</x:ExcelWorksheets>"; excelFile += "</x:ExcelWorkbook>"; excelFile += "</xml>"; excelFile += "<![endif]-->"; excelFile += "</head>"; excelFile += "<body>"; excelFile += excel; excelFile += "</body>"; excelFile += "</html>"; var uri = 'data:application/vnd.ms-excel;charset=utf-8,' + encodeURIComponent(excelFile); var link = document.createElement("a"); link.href = uri; link.style = "visibility:hidden"; link.download = FileName + ".xls"; document.body.appendChild(link); link.click(); document.body.removeChild(link); }
再次簡化：終極簡化導出excel（一萬條數據可在10秒內導出）
//json數據轉excel function JSONToOrderExcelConvertor(JSONData) { var str = '序號,訂單號,訂單時間,主要用途,客戶名稱,電話,產品型號,是否形成有效線索\n'; for(let i=0;i<JSONData.length;i++){ var result =''; if (JSONData[i].orderStatusc=='0'){ result="是"; } else { result="否"; } str += (i+1).toString()+','+JSONData[i].orderId+'\t'+','+formateOrderTime(JSONData[i].orderTime)+'\t'+','+JSONData[i].p1+'\t'+','+JSONData[i].userName+'\t'+','+JSONData[i].recMobile+'\t'+','+JSONData[i].productName+'\t'+','+result+'\t'+',\n' } var blob = new Blob([str], {type: "text/plain;charset=utf-8"}); //解決中文亂碼問題 blob = new Blob([String.fromCharCode(0xFEFF), blob], {type: blob.type}); object_url = window.URL.createObjectURL(blob); var link = document.createElement("a"); link.href = object_url; link.download = "導出訂單.xls"; document.body.appendChild(link); link.click(); document.body.removeChild(link); }
第四種、使用插件導出js
引入js
<script src="https://cuikangjie.github.io/JsonExportExcel/dist/JsonExportExcel.min.js"></script>
function JsonToExcel(jsonData,fileName,sheetName,sheetHeader) {
var option = {};
option.fileName = fileName;
option.datas = [
{
sheetData : jsonData,
sheetName : sheetName,
sheetHeader : sheetHeader
}
];
var toExcel=new ExportJsonExcel(option);
toExcel.saveExcel();
}
由於使用nginx ，數據量超過倆萬條時，請求時間超出nginx要求的響應時間就會報504 鏈接超時