運用js實現將頁面中的table導出為excel文件,頁面顯示如下:

導出的excel文件顯示如下:

實現代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
table{border-collapse: collapse; }
th, td{border: 1px solid #4d4d4d;padding: 5px; }
</style>
<script type="text/javascript" language="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();
}
/*
template : 定義文檔的類型,相當於html頁面中頂部的<!DOCTYPE> 聲明。(個人理解,不確定)
encodeURIComponent:解碼
unescape() 函數:對通過 escape() 編碼的字符串進行解碼。
window.btoa(window.encodeURIComponent(str)):支持漢字進行解碼。
\w :匹配包括下划線的任何單詞字符。等價於’[A-Za-z0-9_]’
replace()方法:用於在字符串中用一些字符替換另一些字符,或替換一個與正則表達式匹配的子串。
{(\w+)}:匹配所有 {1個或更多字符} 形式的字符串;此處匹配輸出內容是 “worksheet”
正則中的() :是為了提取匹配的字符串。表達式中有幾個()就有幾個相應的匹配字符串。
講解(/{(\w+)}/g, function(m, p) { return c[p]; } :
/{(\w+)}/g 匹配出所有形式為“{worksheet}”的字符串;
function參數: m 正則所匹配到的內容,即“worksheet”;
p 正則表達式中分組的內容,即“(\w+)”分組中匹配到的內容,為“worksheet”;
c :為object,見下圖3
c[p] : 為“worksheet”
*/
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)))
},
// 下面這段函數作用是:將template中的變量替換為頁面內容ctx獲取到的值
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};
// format()函數:通過格式操作使任意類型的數據轉換成一個字符串
// base64():進行編碼
window.location.href = uri + base64(format(template, ctx))
}
})()
</script>
</head>
<body>
<table id="ta">
<tr>
<th></th>
<th>一</th>
<th>二</th>
<th>三</th>
<th>四</th>
</tr>
<tr>
<td>萬籟寂無聲</td>
<td>衾鐵棱棱近五更</td>
<td>香斷燈昏吟未穩</td>
<td>凄清</td>
<td>只有霜華伴月明</td>
</tr>
<tr>
<td>應是夜寒凝</td>
<td>惱得梅花睡不成</td>
<td>我念梅花花念我</td>
<td>關情</td>
<td>起看清冰滿玉瓶</td>
</tr>
</table>
<br/>
<input type="button" value="導出EXCEL" onclick="method1('ta')" />
</body>
</html>
圖3:

代碼事例中運用到的知識都在注釋中說明,方便以后查看,尤其是正則 replace 各個參數的意義,是屬於比較細的知識點。個人見解歡迎指正。
關於replace的用法詳解請參考另一篇博文:http://www.cnblogs.com/zhangym118/p/6235998.html
