js 導出 html 中的 table 表格爲 excel

時間 2019-11-25
標籤導出 html table 表格 excel 欄目 JavaScript 简体版
原文原文鏈接
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            padding: 1em;
        }
    </style>
</head>
<body>
<div class="box">
    <div>
        <button type="button" id="excelBtn">導出Excel方法五</button>
    </div>
    <div id="myDiv">
        <table id="tableExcel" width="100%" border="1" cellspacing="0" cellpadding="0">
            <!-- caption元素能夠生成表標題，其單元格列跨度爲表格的列數 -->
            <caption>學生成績表</caption>
            <tr>
                <!-- 可使用rowspan和colspan來合併單元格 -->
                <th rowspan="2">編號</th>
                <th rowspan="2">學號</th>
                <th rowspan="2">姓名</th>
                <th rowspan="2">性別</th>
                <th rowspan="2">年齡</th>
                <th colspan="3">成績</th>
            </tr>
            <tr>
                <th>語文</th>
                <th>數學</th>
                <th>英語</th>
            </tr>
            <tr>
                <td>1</td>
                <td>2016001</td>
                <td>張三</td>
                <td>男</td>
                <td>13</td>
                <td>85</td>
                <td>94</td>
                <td>77</td>
            </tr>
            <tr>
                <td>2</td>
                <td>2016002</td>
                <td>李四</td>
                <td>女</td>
                <td>12</td>
                <td>96</td>
                <td>84</td>
                <td>89</td>
            </tr>
        </table>
    </div>
</div>
</body>
<script>
    document.getElementById('excelBtn').onclick = () => {
        exportExcel.exports(tableExcel);
    };
    class ExportExcel {
        constructor() {
            this.idTmr = null;
            this.uri = 'data:application/vnd.ms-excel;base64,';
            this.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><meta charset="UTF-8"><!--[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>';      
        }
        getBrowser() {
            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';
            }
        };
        exports(tableid) {
            if (this.getBrowser() == 'ie') {
                var curTbl = document.getElementById(tableid);
                var oXL = new ActiveXObject("Excel.Application");
                var oWB = oXL.Workbooks.Add();
                var xlsheet = oWB.Worksheets(1);
                var sel = document.body.createTextRange();
                sel.moveToElementText(curTbl);
                sel.select();
                sel.execCommand("Copy");
                xlsheet.Paste();
                oXL.Visible = true;
 
                try {
                    var fname = oXL.Application.GetSaveAsFilename("Excel.xls", "Excel Spreadsheets (*.xls), *.xls");
                } catch (e) {
                    alert(e);
                } finally {
                    oWB.SaveAs(fname);
                    oWB.Close(savechanges = false);
                    oXL.Quit();
                    oXL = null;
                    this.idTmr = window.setInterval("Cleanup();", 1);
                }
            } else {
                this.openExport(tableid)
            }
        };
        openExport(table, name) {
            if (!table.nodeType) {
                table = document.getElementById(table)
            }
            var ctx = {
                worksheet: name || 'Worksheet',
                table: table.innerHTML
            };
            window.location.href = this.uri + this.base64(this.format(this.template, ctx));
        };
        base64(s) {
            return window.btoa(unescape(encodeURIComponent(s)))
        };
        format(s, c) {
            return s.replace(/{(\w+)}/g, function (m, p) {
                return c[p];
            });
        };
    }
    var exportExcel = new ExportExcel();
</script>
</html>
轉載html