js 導出excel ,複雜多級表頭，自定義樣式，自定義名稱excel

本文提供一份不使用插件但能在vue和jquery以及原生javascript中導出excel的代碼

1.先看html效果圖：

2.再看導出excel效果圖：

3.下面是HTML完整代碼

js 導出excel ,複雜多級表頭，自定義樣式，自定義名稱excel

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <table border=\'1\' class="html-tabel">
        <tr style="text-align: center;">
            <th rowspan="2" style="background:red;">日期</th>
            <th rowspan="2" style="background:red;">姓名</th>
            <th colspan="3" style="background:red;">位址</th>
        </tr>
        <tr style="text-align: center;">
            <th style="background:red;">省份</th>
            <th style="background:red;">市區</th>
            <th style="background:red;">位址</th>
        </tr>
        <tr style="text-align: center;">
            <td>2020-05-20</td>
            <td>張三</td>
            <td>上海</td>
            <td>普陀區</td>
            <td>上海市普陀區金沙江路 1518 弄</td>
        </tr>
        <tr style="text-align: center;">
            <td>2020-11-11</td>
            <td>李四</td>
            <td>上海</td>
            <td>普陀區</td>
            <td>上海市普陀區金沙江路 1518 弄</td>
        </tr>
        <table>
            <br />
            <button onclick="tableToExcel()">導出excel</button>
            <script>
                function tableToExcel() {
                    var tabelStr = document.querySelector(\'.html-tabel\').outerHTML;
                    //Worksheet名
                    var worksheet = \'測試表名\'
                    var uri = \'data:application/vnd.ms-excel;base64,\';
                    // 真正要導出（下載下傳）的HTML模闆
                    var exportTemplate = `<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><!--[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>
                        ${tabelStr}
                    </body>
                    </html>`;
                    //下載下傳模闆
                    var a = document.createElement("a");
                    a.download = worksheet + ".xlsx";
                    a.href = uri + base64(exportTemplate);
                    a.click();
                };
                //輸出base64編碼
                function base64(s) {
                    return window.btoa(unescape(encodeURIComponent(s)))
                };
            </script>
</body>
</html>

點選檢視代碼

核心就是想辦法弄出要導出的tabel的html字元串出來，樣式啥的可以寫成行内樣式，就會在excel中起效

tips：在 element 中的 el-tabel 中使用

使用 document.querySelectorAll() 方法擷取相關Dom結構的數組
把需要的數組項通過 innerHtml 或者 outerHtml 轉成字元串
如果不是你需要的，就通過字元串的方法轉成你需要的字元串（比如表頭+表體+表尾通過字元串拼接連接配接）
最後把變量指派進去