1、导出为.csv格局（不兼容ie）
<html><meta charset=utf-8><head></head><body><button onclick='JSONToExcel()'>导出</button><script> function JSONToExcel(){ // 要导出的json数据，这部分数据能够来自ajax申请 const jsonData = [ { "name": "常健", "dept": "挪动研发部", "id": "1", "attendance": 10, "rest": 20 }, { "name": "陈熙文", "dept": "挪动研发部", "id": "2", "attendance": 20, "rest": 10 }, { "name": "迟野", "dept": "挪动研发部", "id": "3", "attendance": 0, "rest": 30 } ] //列题目，逗号隔开 let str = `姓名,部门,id,考勤天数,劳动天数\n`; //减少\t为了不让表格显示迷信计数法或者其余格局 for(let i = 0; i < jsonData.length; i++){ for(let item in jsonData[i]){ str+=`${jsonData[i][item] + '\t'},`; } str+='\n'; } //encodeURIComponent解决中文乱码， \ufeff是 "" let uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str); //通过创立a标签实现 let link = document.createElement("a"); link.href = uri; //对下载的文件命名 link.download = "考勤月度统计.csv"; document.body.appendChild(link); link.click(); document.body.removeChild(link); }</script></body></html>
2、导出为.xls格局（不兼容ie firefox）
<html><meta charset=utf-8><head></head><body><button onclick='tableToExcel()'>导出</button><script> function tableToExcel() { //要导出的json数据 const jsonData = [ { "name": "常健", "dept": "挪动研发部", "id": "1", "attendance": 10, "rest": 20 }, { "name": "陈熙文", "dept": "挪动研发部", "id": "2", "attendance": 20, "rest": 10 }, { "name": "迟野", "dept": "挪动研发部", "id": "3", "attendance": 0, "rest": 30 } ] //列题目 let str = '<tr><td>姓名</td><td>部门</td><td>id</td><td>考勤天数</td><td>劳动天数</td></tr>'; //循环遍历，每行退出tr标签，每个单元格加td标签 for (let i = 0; i < jsonData.length; i++) { str += '<tr>'; for (let item in jsonData[i]) { //减少\t为了不让表格显示迷信计数法或者其余格局 str += `<td>${jsonData[i][item]}</td>`; } str += '</tr>'; } let excelHtml = ` <html> <head> <meta charset='utf-8' /> </head> <body> <table> ${str} </table> </body> </html> ` let excelBlob = new Blob([excelHtml], {type: 'application/vnd.ms-excel'}) // 创立一个a标签 let oA = document.createElement('a'); // 利用URL.createObjectURL()办法为a元素生成blob URL oA.href = URL.createObjectURL(excelBlob); // 给文件命名 oA.download = '考勤月历统计表.xls'; // 模仿点击 oA.click() }</script></body></html>