table导出excel的js方法:
利用html5的download属性,点击下载该文件
- 按F12 或者右键–检查调出控制台
- ctrl+shif+c或者点击下图图标
- 然后将鼠标移动到表格外层(任意地方),如图:
点击之后,下面的调试控制台会选中当前元素,然后在当前元素右键选择 Edit as HTML
将下面两句代码插入选中的html最前面(后面也行)
<a id="dlink" style="display:none;"></a>
<input type="button" onclick="tableToExcel('tables', 'name', 'myfile.xls')" value="Export to Excel">
如图:
加之前:
加之后:
加完之后会多出一个 Export to Excel按钮,虽然长的不好看,凑合用。效果如图:
- 继续ctrl+shif+c或者点击下图图标
鼠标移动到table上,右键 Edit as HTML,添加id=‘tables’,如图:
- 点击Console
- 输入下面的代码:
var tableToExcel = (function () {
var uri = 'data:application/vnd.ms-excel;base64,',
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]--></head><body><table>{table}</table></body></html>',
base64 = function (s) { return window.btoa(unescape(encodeURIComponent(s))) },
format = function (s, c) { return s.replace(/{(\w+)}/g, function (m, p) { return c[p]; }) };
return function (table, name, filename) {
if (!table.nodeType) table = document.getElementById(table)
var ctx = { worksheet: name || 'Worksheet', table: table.innerHTML }
document.getElementById("dlink").href = uri + base64(format(template, ctx));
document.getElementById("dlink").download = filename;
document.getElementById("dlink").click();
}
})()
- 然后回车之后可以点击上一步加的 Export to Excel按钮就可以下载了