2016年10月11日 星期二

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><!--[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