若 Table 中的某儲存格會有斷行的情況,則需在網頁的斷行語法加上特定的樣式 (mso-data-placement:same-cell;) 如下
<html>
<table id="myTable">
<tr>
<td>第一列第一欄<td>
<td>第一列第二欄<td>
<td>第一列第三欄<td>
</tr>
<tr>
<td>
第二列第一欄第一行<br
style=
'mso-data-placement:same-cell;'
/
>第二列第一欄第二行
<td>
<td>第二列第二欄<td>
<td>第二列第三欄<td>
</tr>
<tr>
<td>第三列第一欄<td>
<td>第三列第二欄<td>
<td>第三列第三欄<td>
</tr>
</table>
</html>
<input id="btnExport" onclick="ExportTable('myTable'); return false;" type="button" value="另存成 Excel" />
<解決方法一>
下列語法可將網頁上的特定 Table 下載為 Excel
<script>
function ExportTable(tableid)
{
var data_type = 'data:application/vnd.ms-excel';
var table_html = $(tableid)[0].outerHTML.replace(/ /g, '%20');
var a = document.createElement('a');
a.href = data_type + ', ' + table_html;
a.download = '下載.xls';
a.click();
}
</script>
<解決方法二> 個人偏好這個方式
<script>
var table_print;
function ExportTable(tableid, removeLastColCount) {
//getting data from our table
table_print = $('#' + tableid)[0].cloneNode(true); // copy 一份畫面上的table,再針對這個table 做處理
deleteColumn(removeLastColCount);
tableToExcel(table_print, '')
}
// 刪除倒數幾欄 (因為多個欄位是功能欄)
function deleteColumn(lastColCount) {
for (var i = 0; i < table_print.rows.length; i++) {
for (var k = 0; k < lastColCount; k++) {
// 刪除最後一欄(因為有合併列,所以只能用這個方式)
table_print.rows[i].deleteCell(table_print.rows[i].cells.length - 1);
//table_print.rows[i].cells[table_print.rows[i].cells.length - 1].innerHTML = "";
}
}
}
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"><meta http-equiv="content-type" content="application/vnd.ms-excel; charset=UTF-8"><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 border="1px">{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>
參考來源:http://stackoverflow.com/questions/36040942/how-to-export-a-html-table-to-excel-supported-by-chrome-and-ie