JS匯出html的table表格
jsp的html的內容 如下,我的這個是使用了jstl標籤形成的table
<span id="Button1" onclick="javascript:HtmlExportToExcel('PanelExcel')">匯出excel</span>
<a id="dlink" style="display: none;"></a>
<table id="PanelExcel">
<tr>
<td>日期</td>
<td>地點</td>
<td>專案</td>
<td >長途交通費</td>
<td>市內交通費</td>
<td>住宿費</td>
<td>其他</td>
<td>費用說明</td>
<td>出差補助</td>
<c:if test="${user.userlevel==2||user.userlevel==3||user.userlevel==4}">
<td>日報</td>
</c:if>
</tr>
<c:forEach items="${details}" var="detail">
<tr>
<td>${detail.detaildata}</td>
<td>${detail.location}</td>
<td>${detail.project}</td>
<td>${detail.longfare}</td>
<td>${detail.shortfare}</td>
<td>${detail.hotelfare}</td>
<td>${detail.otherfare}</td>
<td style="width:150px;"><div style="overflow:auto;width:150px;height:30px;">${detail.faredescription}</div></td>
<td>${detail.travelallowance}</td>
<c:if test="${user.userlevel==2||user.userlevel==3||user.userlevel==4}">
<td style="width:150px;"><div style="overflow:auto;width:150px;height:30px;">${detail.daily}</div></td>
</c:if>
</tr>
</c:forEach>
</table>
js程式碼
<script>
//jQuery HTML匯出Excel檔案(相容IE及所有瀏覽器)
function HtmlExportToExcel(tableid) {
var filename = "報銷";
if (getExplorer() == 'ie' || getExplorer() == undefined) {
HtmlExportToExcelForIE(tableid, filename);
}
else {
HtmlExportToExcelForEntire(tableid, filename)
}
}
//IE瀏覽器匯出Excel
function HtmlExportToExcelForIE(tableid, filename) {
try {
var winname = window.open('', '_blank', 'top=10000');
var strHTML = document.getElementById(tableid).innerHTML;
winname.document.open('application/vnd.ms-excel', 'export excel');
winname.document.writeln(strHTML);
winname.document.execCommand('saveas', '', filename + '.xls');
winname.close();
} catch (e) {
alert(e.description);
}
}
//非IE瀏覽器匯出Excel
var HtmlExportToExcelForEntire = (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><!--[ifgtemso9]><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 }
document.getElementById("dlink").href = uri + base64(format(template, ctx));
document.getElementById("dlink").download = name + ".xls";
document.getElementById("dlink").click();
}
})()
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';
}
}
</script>
執行截圖
當然了這個方法只適合簡單了excel，如果是要使用一個模板該怎麼弄呢，那就要使用freemarker了。具體如何我就不在這裡細說。