这段时间一直写的是华为的电信,移动大屏可视化项目。对数据的处理要求比较高,其中遇到一个问题就是客户需要导出前台展示table表中的内容,之前一直是后台给接口,调用接口后台做导出功能的,但现在考虑到安全的问题,需要由前台来做,于是博主研究了一波。嘿嘿,JS还是那么强大,不仅可以导出表格,我们换可以自定义我们导出表格的样式,下面是我写的一个方法,供大家参考:


function JSONToExcelConvertor(JSONData, FileName, ShowLabel) {
var arrData = typeof JSONData != 'object' ? JSON.parse(JSONData) : JSONData; console.log(arrData) var excel = '<table>'; var row = "<tr>"; for (var i = 0, l = ShowLabel.length; i < l; i++) { row += "<td>" + ShowLabel[i] + '</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>' + 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 += "{"+FileName+"}"; excelFile += "</x:Name>"; excelFile += "<x:WorksheetOptions>"; excelFile += "<x:DisplayGridlines/>"; excelFile += "</x:WorksheetOptions>"; excelFile += "</x:ExcelWorksheet>"; excelFile += "</x:ExcelWorksheets>"; excelFile += "</x:ExcelWorkbook>"; excelFile += "</xml>"; excelFile +=' <style type="text/css">' + 'table td {' + 'border: 1px solid #000000;' + 'width: 200px;' + 'height: 30px;' + ' text-align: center;' + 'background-color: #4f891e;' + 'color: #ffffff;' + ' }' + '</style>' 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); }
自定义样式我写在了生成表格的Xml里面,在这里面我们可以自定义我们想要的表格表头的样式,表格body的样式,有需要博主写的demo源码的点击下载 密码:6bfg