js匯出頁面表格資料到Excel
1.解決了無法自定義Excel檔名的問題
2.解決了介面身份證號碼等比較長的數字匯出Excel後成科學計數法的問題。
3.相容常見瀏覽器
/**公用方法
* 方法：exportToExcel(tableid,filename,sheetname)
* 引數：tableid 表格ID,filename 檔名,sheet名
* 功能：匯出介面表格中的資料到Excel
* 返回：
* Auther:king
* Rem: 2017-6-7 add
*/
function exportToExcel(tableid,filename,sheetname){
if(getExplorer()=='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(filename, "Excel Spreadsheets (*.xls), *.xls");
} catch (e){
print("Nested catch caught " + e);
} finally {
oWB.SaveAs(fname);
oWB.Close(savechanges = false);
oXL.Quit();
oXL = null;
idTmr = window.setInterval("Cleanup();", 1);
}
}else{
tableToExcel(tableid,filename,sheetname)
}
}
function Cleanup(){
window.clearInterval(idTmr);
CollectGarbage();
}
/**公用方法
* 方法：tableToExcel(table,name,filename)
* 引數：tableid 表格ID
* 功能：將html的table轉成Excel的data協議型別資料 table 是HTML DOM Document 物件 name 是sheet的名稱
* 返回：
* Auther:king
* Rem: 2017-6-7 add
*/
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,filename,sheetname){
//這裡建立一個<a/>標記利用a標記的download屬性來自定義Excel檔名,解決button按鈕觸發下載無法自定義Excel檔名的問題
var a = $('<a id="dlink" style="display:none;"/>');
$(document.body).append(a);
if (!table.nodeType) table = document.getElementById(table);
var ctx = { worksheet: sheetname || 'Worksheet', table: table.innerHTML }
a.attr("href",uri + base64(format(template, ctx)));
a.attr("download",filename);//這裡是關鍵所在,當點選之後,設定a標籤的屬性,這樣就可以更改excel檔案的名字了
document.getElementById("dlink").click();
}
})();
<script type="text/javascript">
$(document).ready(function () {
$(function(){
$('#btnExport').on('click', function(){
exportToExcel('contentTable','測試1','xxxxx等等x');
});
});
});
</script>
注意：利用 <td style="mso-number-format:'\@';"> 處理 介面身份證號碼等比較長的數字匯出Excel後成科學計數法的問題。
參考文件
1.http://blog.csdn.net/nihaoqiulinhe/article/details/53065005
2.http://blog.csdn.net/nihaoqiulinhe/article/details/53537540