js导出表格到excel（合并头）
Posted 迪克飞
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js导出表格到excel（合并头）相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="table1"> <div class="tbHeadFix"> <div class="theadDiv" id="table1_theadDiv"> <div class="theadDivBox"> <table id="ta"> <thead> <tr class="font-size-12 tr_head" > <th rowspan="2"> <div class="col col0">品号</div> </th> <th rowspan="2"> <div class="col col2">客户</div> </th> <th colspan="2"> <div class="col col3">1月</div> </th> <th colspan="2"> <div class="col col4">2月</div> </th> <th colspan="2"> <div class="col col5">3月</div> </th> <th colspan="2"> <div class="col col6">4月</div> </th> <th colspan="2"> <div class="col col7">5月</div> </th> <th colspan="2"> <div class="col col8">6月</div> </th> <th colspan="2"> <div class="col col9">7月</div> </th> <th colspan="2"> <div class="col col10">8月</div> </th> <th colspan="2"> <div class="col col11">9月</div> </th> <th colspan="2"> <div class="col col12">10月</div> </th> <th colspan="2"> <div class="col col13">11月</div> </th> <th colspan="2"> <div class="col col14">12月</div> </th> <th colspan="2"> <div class="col col15">小计</div> </th> </tr> <tr class="font-size-12 tr_head" > <th> <div class="mcol">预算</div> </th> <th> <div class="mcol">决算</div> </th> <th> <div class="mcol">预算</div> </th> <th> <div class="mcol">决算</div> </th> <th> <div class="mcol">预算</div> </th> <th> <div class="mcol">决算</div> </th> <th> <div class="mcol">预算</div> </th> <th> <div class="mcol">决算</div> </th> <th> <div class="mcol">预算</div> </th> <th> <div class="mcol">决算</div> </th> <th> <div class="mcol">预算</div> </th> <th> <div class="mcol">决算</div> </th> <th> <div class="mcol">预算</div> </th> <th> <div class="mcol">决算</div> </th> <th> <div class="mcol">预算</div> </th> <th> <div class="mcol">决算</div> </th> <th> <div class="mcol">预算</div> </th> <th> <div class="mcol">决算</div> </th> <th> <div class="mcol">预算</div> </th> <th> <div class="mcol">决算</div> </th> <th> <div class="mcol">预算</div> </th> <th> <div class="mcol">决算</div> </th> <th> <div class="mcol">预算</div> </th> <th> <div class="mcol">决算</div> </th> <th> <div class="mcol">预算</div> </th> <th> <div class="mcol">决算</div> </th> </tr> </thead> <tbody> <tr class="font-size-12 tr_head" > <th rowspan="2"> <div class="col col0">品号</div> </th> <th rowspan="2"> <div class="col col2">客户</div> </th> <th colspan="2"> <div class="col col3">1月</div> </th> <th colspan="2"> <div class="col col4">2月</div> </th> <th colspan="2"> <div class="col col5">3月</div> </th> <th colspan="2"> <div class="col col6">4月</div> </th> <th colspan="2"> <div class="col col7">5月</div> </th> <th colspan="2"> <div class="col col8">6月</div> </th> <th colspan="2"> <div class="col col9">7月</div> </th> <th colspan="2"> <div class="col col10">8月</div> </th> <th colspan="2"> <div class="col col11">9月</div> </th> <th colspan="2"> <div class="col col12">10月</div> </th> <th colspan="2"> <div class="col col13">11月</div> </th> <th colspan="2"> <div class="col col14">12月</div> </th> <th colspan="2"> <div class="col col15">小计</div> </th> </tr> <tr class="font-size-12 tr_head" > <th> <div class="mcol">预算</div> </th> <th> <div class="mcol">决算</div> </th> <th> <div class="mcol">预算</div> </th> <th> <div class="mcol">决算</div> </th> <th> <div class="mcol">预算</div> </th> <th> <div class="mcol">决算</div> </th> <th> <div class="mcol">预算</div> </th> <th> <div class="mcol">决算</div> </th> <th> <div class="mcol">预算</div> </th> <th> <div class="mcol">决算</div> </th> <th> <div class="mcol">预算</div> </th> <th> <div class="mcol">决算</div> </th> <th> <div class="mcol">预算</div> </th> <th> <div class="mcol">决算</div> </th> <th> <div class="mcol">预算</div> </th> <th> <div class="mcol">决算</div> </th> <th> <div class="mcol">预算</div> </th> <th> <div class="mcol">决算</div> </th> <th> <div class="mcol">预算</div> </th> <th> <div class="mcol">决算</div> </th> <th> <div class="mcol">预算</div> </th> <th> <div class="mcol">决算</div> </th> <th> <div class="mcol">预算</div> </th> <th> <div class="mcol">决算</div> </th> <th> <div class="mcol">预算</div> </th> <th> <div class="mcol">决算</div> </th> </tr> </tbody> </table> </div> </div> <!--表格1结束--> <button onclick="javascript:method1(‘ta‘)">导出EXCEL</button> <script type="text/javascript"> var idTmr; function getExplorer() { 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‘; } } function method1(tableid) {//整个表格拷贝到EXCEL中 if(getExplorer()==‘ie‘) { var curTbl = document.getElementById(tableid); var oXL = new ActiveXObject("Excel.Application"); //创建AX对象excel var oWB = oXL.Workbooks.Add(); //获取workbook对象 var xlsheet = oWB.Worksheets(1); //激活当前sheet var sel = document.body.createTextRange(); sel.moveToElementText(curTbl); //把表格中的内容移到TextRange中 sel.select(); //全选TextRange中内容 sel.execCommand("Copy"); //复制TextRange中内容 xlsheet.Paste(); //粘贴到活动的EXCEL中 oXL.Visible = true; //设置excel可见属性 try { var fname = oXL.Application.GetSaveAsFilename("Excel.xls", "Excel Spreadsheets (*.xls), *.xls"); } catch (e) { print("Nested catch caught " + e); } finally { oWB.SaveAs(fname); oWB.Close(savechanges = false); //xls.visible = false; oXL.Quit(); oXL = null; //结束excel进程，退出完成 //window.setInterval("Cleanup();",1); idTmr = window.setInterval("Cleanup();", 1); } } else { tableToExcel(‘ta‘); } } function Cleanup() { window.clearInterval(idTmr); CollectGarbage(); } 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) { if (!table.nodeType) table = document.getElementById(table) var ctx = {worksheet: name || ‘Worksheet‘, table: table.innerHTML} window.location.href = uri + base64(format(template, ctx)) } })(); </script> </body> </html>
以上是关于js导出表格到excel（合并头）的主要内容，如果未能解决你的问题，请参考以下文章
js-xlsx和file-saver插件前端html的table导出数据到excel的表格合并显示boder