js 导出 html 中的 table 表格为 excel
今天说一下如何将html中的表格导出为 excel ，以后就不用麻烦后台小伙伴了，话不多说，直接上代码
es6
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
padding: 1em;
}
</style>
</head>
<body>
<div class="box">
<div>
<button type="button" id="excelBtn">导出Excel方法五</button>
</div>
<div id="myDiv">
<table id="tableExcel" width="100%" border="1" cellspacing="0" cellpadding="0">
<!-- caption元素可以生成表标题，其单元格列跨度为表格的列数 -->
<caption>学生成绩表</caption>
<tr>
<!-- 可以使用rowspan和colspan来合并单元格 -->
<th rowspan="2">编号</th>
<th rowspan="2">学号</th>
<th rowspan="2">姓名</th>
<th rowspan="2">性别</th>
<th rowspan="2">年龄</th>
<th colspan="3">成绩</th>
</tr>
<tr>
<th>语文</th>
<th>数学</th>
<th>英语</th>
</tr>
<tr>
<td>1</td>
<td>2016001</td>
<td>张三</td>
<td>男</td>
<td>13</td>
<td>85</td>
<td>94</td>
<td>77</td>
</tr>
<tr>
<td>2</td>
<td>2016002</td>
<td>李四</td>
<td>女</td>
<td>12</td>
<td>96</td>
<td>84</td>
<td>89</td>
</tr>
</table>
</div>
</div>
</body>
<script>
document.getElementById('excelBtn').onclick = () => {
exportExcel.exports(tableExcel);
};
class ExportExcel {
constructor() {
this.idTmr = null;
this.uri = 'data:application/vnd.ms-excel;base64,';
this.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><meta charset="UTF-8"><!--[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]--></head><body><table>{table}</table></body></html>';
}
getBrowser() {
var explorer = window.navigator.userAgent;
//ie
if (explorer.indexOf("MSIE") >= 0) {
return 'ie';
}
//firefox
else if (explorer.indexOf("Firefox") >= 0) {
return 'Firefox';
}
//Chrome
else if (explorer.indexOf("Chrome") >= 0) {
return 'Chrome';
}
//Opera
else if (explorer.indexOf("Opera") >= 0) {
return 'Opera';
}
//Safari
else if (explorer.indexOf("Safari") >= 0) {
return 'Safari';
}
};
exports(tableid) {
if (this.getBrowser() == 'ie') {
var curTbl = document.getElementById(tableid);
var oXL = new ActiveXObject("Excel.Application");
var oWB = oXL.Workbooks.Add();
var xlsheet = oWB.Worksheets(1);
var sel = document.body.createTextRange();
sel.moveToElementText(curTbl);
sel.select();
sel.execCommand("Copy");
xlsheet.Paste();
oXL.Visible = true;
try {
var fname = oXL.Application.GetSaveAsFilename("Excel.xls", "Excel Spreadsheets (*.xls), *.xls");
} catch (e) {
alert(e);
} finally {
oWB.SaveAs(fname);
oWB.Close(savechanges = false);
oXL.Quit();
oXL = null;
this.idTmr = window.setInterval("Cleanup();", 1);
}
} else {
this.openExport(tableid)
}
};
openExport(table, name) {
if (!table.nodeType) {
table = document.getElementById(table)
}
var ctx = {
worksheet: name || 'Worksheet',
table: table.innerHTML
};
window.location.href = this.uri + this.base64(this.format(this.template, ctx));
};
base64(s) {
return window.btoa(unescape(encodeURIComponent(s)))
};
format(s, c) {
return s.replace(/{(\w+)}/g, function (m, p) {
return c[p];
});
};
}
var exportExcel = new ExportExcel();
</script>
</html>以上代码亲测有效
本文纯手打，有不当之处请留言！谢谢！