2020-3-1 seo达人
纯JS对页面表格进行EXCEL导出
1.中间部分在style标签那种可以使用css样式对表格进行任意样式的修改
2.在tableid.innerHTML中可以对表格中的内容进行修改替换（其中放的内容就是导出后的表格内容）
3.需要引入xlsx.full.min.js文件
4.tableid为为表格的id
5.sheetName为下载后的文件名称
base64(excelFile) {
return window.btoa(unescape(encodeURIComponent(excelFile)))
},
tableToExcel(tableid, sheetName) {
var uri = 'data:application/vnd.ms-excel;base64,';
var template = '<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"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>'
+ '<x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets>'
+ '</x:ExcelWorkbook></xml><![endif]-->' +
' <style type="text/css">' +
' .ivu-table td{\n' +
' /background-color: #FFFFFF;/\n' +
' /color: #fff;/\n' +
' /border:1px solid #FFFFFF;/\n' +
' }\n' +
' /每行的基本样式/\n' +
' .ivu-table-row td {\n' +
' color: #000000;\n' +
' min-width:50px;\n' +
' }\n' +
' /头部th/\n' +
' .ivu-table-header th{\n' +
' color:\t#FFFFFF;\n' +
' font-weight: bold;\n' +
' background-color: rgb(98,167,249);\n' +
' min-width:50px;' +
' border:1px solid #FFFFFF;' +
' position: relative; \n' +
' top: expression(this.offsetParent.scrollTop); \n' +
' z-index: 300; \n' +
' }\n' +
' /偶数行/\n' +
' .ivu-table-stripe-even td{\n' +
' background-color: #ffffff!important;\n' +
' }\n' +
' /奇数行/\n' +
' .ivu-table-stripe-odd td{\n' +
' background-color:#F0FFFF!important;\n' +
' }\n' +
' /选中某一行高亮/\n' +
' .ivu-table-row-highlight td {\n' +
' background-color: #d63333!important;\n' +
' }' +
'</style>' +
'</head><body ><table class="excelTable">{table}</table></body></html>';
if (!tableid.nodeType) tableid = document.getElementById(tableid);
tableid.innerHTML = tableid.innerHTML.replace('暂无筛选结果','')
var ctx = {worksheet: sheetName || 'Worksheet', table: tableid.innerHTML};
var a = document.createElement("a");
a.download = sheetName + ".xls";
a.href = uri + this.base64(this.format(template, ctx));;
a.click();
},
format (s, c) {
return s.replace(/{(\w+)}/g,
function (m, p) {
return c[p];
});
}