導出效果

代碼實現

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <table id="table" border="1">
        <tr style="height:50px;">
            <th style="width:100px;color:red;">姓名</th>
            <th>性別</th>
            <th>年齡</th>
        </tr>
        <tr>
            <td>小明</td>
            <td>男</td>
            <td>16</td>
        </tr>
        <tr>
            <td>小紅</td>
            <td>女</td>
            <td>17</td>
        </tr>
        <tr>
            <td>小張</td>
            <td>男</td>
            <td>17</td>
        </tr>
    </table>
    <a id="down">點擊下載excel</a>
    <script>
        let html = `<!DOCTYPE html>
            <html lang="en">
            <head>
                <meta charset="UTF-8">
            </head>
            <body>
                ${document.getElementById('table').outerHTML}
            </body>
            </html>`
        let blob = new Blob([html],{ type: 'application/vnd.ms-excel'});
        let a = document.getElementById('down');
        a.href = URL.createObjectURL(blob);
        a.download = '測試excel下載'
    </script>
</body>
</html>

注意事項

　　· 只能寫行內樣式。

　　· 有一部分css無效，目前我發現無效的有flex、margin，盡量使用最普通最老的css寫法，不要使用css3的樣式，用 來代替需要margin的地方；

　　· 因為有些樣式不支持，導出的excel和你寫出來的界面是不會完全一致的，要打印出來測試

　　· 如果在vue中使用建議不要使用document.getElementB…來獲取dom，應該直接使用ref來獲取。

擴展使用

（此節也適用未接觸過前端的人）

首先鍵入 F12 打開控制台，然后鍵入 CTRL + SHIFT + C 選擇元素，將光標移動到頁面上的表格，使高亮區域包裹整個表格，這里拿Element-UI Table舉例。

找到圖片標出的 <table> 標簽，鼠標右鍵，選擇Edit as HTML，在 "<table " 后面添加 " id="table2xls "（注意空格）

切換到控制台

在空白處復制以下代碼並鍵入 ENTER ：

(function() {
   let html = `<!DOCTYPE html>
            <html lang="en">
            <head>
                <meta charset="UTF-8">
            </head>
            <body>
                ${document.getElementById('table2xls').outerHTML}
            </body>
            </html>`
        let blob = new Blob([html],{ type: 'application/vnd.ms-excel'});
        let a = document.createElement('a');
        a.href = URL.createObjectURL(blob);
        a.download = `TableExcel${+new Date()}`
        a.click()
}())