本文提供一份不使用插件但能在vue和jquery以及原生javascript中導出excel的代碼
1.先看html效果圖：
2.再看導出excel效果圖：
3.下面是HTML完整代碼
<!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 轉成字符串
- 如果不是你需要的，就通過字符串的方法轉成你需要的字符串（比如 表頭+表體+表尾 通過字符串拼接連接）
- 最后把變量賦值進去