第一部分：html+js
1.需要使用的表格數據（先不考慮動態生成的table）
<table class="table tableStyles" id="tables"> <caption>不正經的統計表</caption><!--可以生成表格的標題--> <thead> <tr> <th>品牌</th> <th>門店</th> <th>本周回訪</th> <th>本月回訪</th> <th>總回訪</th> <th>本周成交數</th> <th>本月成交數</th> <th>總成交數</th> <th>異常量</th> <th>成交轉化率</th> <th>經手人/th> </tr> </thead> <tbody> <tr> <td rowspan="3">華為</td> <td>華為深圳店</td> <td>20</td> <td>80</td> <td>500</td> <td>1</td> <td>3</td> <td>20</td> <td>1</td> <td>4.0%</td> <td>黃生</td> </tr> <tr> <td>華為東莞店</td> <td>20</td> <td>80</td> <td>500</td> <td>1</td> <td>3</td> <td>20</td> <td>1</td> <td>4.0%</td> <td>黃生</td> </tr> <tr> <td>華為佛山店</td> <td>20</td> <td>80</td> <td>500</td> <td>1</td> <td>3</td> <td>20</td> <td>1</td> <td>4.0%</td> <td>黃生</td> </tr> <tr> <td rowspan="3">小米</td> <td>米家深圳店</td> <td>20</td> <td>80</td> <td>500</td> <td>1</td> <td>3</td> <td>20</td> <td>1</td> <td>4.0%</td> <td>林生</td> </tr> </tbody> </table>
2.Js代碼
①利用html5的download屬性，點擊下載該文件
<a id="dlink" style="display:none;"></a> <input type="button" onclick="tableToExcel('tables', 'name', 'myfile.xls')" value="Export to Excel">
<script type="text/javascript">
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();
}
})()
</script>
②創建ActiveXObject對象復制到表格中
<input id="Button1" type="button" value="導出EXCEL" onclick="javascript:excels('tables')" />
<script type="text/javascript">
var timer;
function getExplorer(){//獲取瀏覽器
var explorer=window.navigator.userAgent;
if(explorer.indexOf("MSIE") >= 0|| (explorer.indexOf("Windows NT 6.1;") >= 0 && explorer.indexOf("Trident/7.0;") >= 0)){
return 'ie';
}else if (explorer.indexOf("Firefox") >= 0) {
return 'Firefox';
}else if(explorer.indexOf("Chrome") >= 0){
return 'Chrome';
}else if(explorer.indexOf("Opera") >= 0){
return 'Opera';
}else if(explorer.indexOf("Safari") >= 0){
return 'Safari';
}
}
function excels(table){
if(getExplorer()=='ie'){
var curTbl = document.getElementById(table);
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 filename = oXL.Application.GetSaveAsFilename("Excel.xls", "Excel Spreadsheets (*.xls), *.xls");
}catch(e){
window.print("Nested catch caught " + e);
}finally{
oWB.SaveAs(filename);
oWB.Close(savechanges = false);
oXL.Quit();
oXL = null;//結束excel進程，退出完成
timer = window.setInterval("Cleanup();", 1);
}
}else{
tableToExcel("tables");
}
}
function Cleanup(){
window.clearInterval(timer);
CollectGarbage();//CollectGarbage,是IE的一個特有屬性,用於釋放內存的
}
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>
第二部分：分析測試
測試環境（谷歌，火狐，IE，EDGE，QQ瀏覽器）
①.真正起到作用的是a標簽的屬性，input按鈕只是起到了一個過渡到download屬性的作用；
其中有編碼解碼，需要注意中文亂碼情況；
測試只有谷歌和火狐起作用，且只有谷歌下載的文件名是“下載.xls”，火狐的文件名像是編碼后的~
雙核瀏覽器當然也只有chrome內核下有效果~~
我比較喜歡的一點，html中合並的單元格導出到excel中繼續保留合並效果~~
谷歌截圖：
火狐截圖:
②.主要是利用AX對象創建excel
在IE下不行，會提示錯誤“不能使用啥對象什么什么”
難道是需要安裝Office軟件？沒試過。。
這幾個瀏覽器中，谷歌的體驗稍微好一點，還可以自己帶個命名什么的~~，其他體驗都不是很友好~~
還有其他的問題是我繼續需要想的，表格內容分頁情況導出？篩選條件后導出全部？等等等~
附上源碼注釋地址：https://github.com/Chuyue0/javascript-demo/blob/master/tableExporeExcel.html
開發過程中有很多預料不到的事，繼續加油吧！
~~~~~~~~~~~~剩到最后的解決辦法是利用插件~~~~~~~~~~~~
比如github上的
1020 Star：https://github.com/kayalshri/tableExport.jquery.plugin
270 Star：https://github.com/clarketm/TableExport
159 Star：https://github.com/huanz/tableExport
說明一下，星星多的插件是有base64編碼，所以還額外需要js腳本！
個人比較喜歡最少星星的庫，感覺明了清晰，可以按需加載~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~