minG: Html 上的 Table 匯出成 xls

HTML 部分

若 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></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

minG

2016年10月11日星期二

Html 上的 Table 匯出成 xls

沒有留言:

張貼留言

2016年10月11日 星期二

Html 上的 Table 匯出成 xls

沒有留言:

張貼留言

2016年10月11日星期二