多个浏览器下应用前端JS实现一键导出excel表

2019-08-14 10:18:48来源：博客园阅读 ()

自己试验了几种方法，找到一种较为全面的一种方式一键输出Excel表格，代码如下

  1 <!DOCTYPE html>
  2 <html>
  3 <head lang="en">
  4     <meta charset="UTF-8">
  5     <title>导出表格</title>
  6     <script language="JavaScript" type="text/javascript">
  7         var Tmr;
  8         function  getExplorer() {
  9             var explorer = window.navigator.userAgent ;
 10             //ie
 11             if (explorer.indexOf("MSIE") >= 0) {
 12                 return 'ie';
 13             }
 14             //firefox
 15             else if (explorer.indexOf("Firefox") >= 0) {
 16                 return 'Firefox';
 17             }
 18             //Chrome
 19             else if(explorer.indexOf("Chrome") >= 0){
 20                 return 'Chrome';
 21             }
 22             //Opera
 23             else if(explorer.indexOf("Opera") >= 0){
 24                 return 'Opera';
 25             }
 26             //Safari
 27             else if(explorer.indexOf("Safari") >= 0){
 28                 return 'Safari';
 29             }
 30         }
 31         function method(tableid) {
 32             if(getExplorer()=='ie')
 33             {
 34                 var curTbl = document.getElementById(tableid);
 35                 var oXL = new ActiveXObject("Excel.Application");
 36                 var oWB = oXL.Workbooks.Add();
 37                 var xlsheet = oWB.Worksheets(1);
 38                 var sel = document.body.createTextRange();
 39                 sel.moveToElementText(curTbl);
 40                 sel.select();
 41                 sel.execCommand("Copy");
 42                 xlsheet.Paste();
 43                 oXL.Visible = true;
 44 
 45                 try {
 46                     var fname = oXL.Application.GetSaveAsFilename("Excel.xls", "Excel Spreadsheets (*.xls), *.xls");
 47                 } catch (e) {
 48                     print("Nested catch caught " + e);
 49                 } finally {
 50                     oWB.SaveAs(fname);
 51                     oWB.Close(savechanges = false);
 52                     oXL.Quit();
 53                     oXL = null;
 54                     Tmr = window.setInterval("Cleanup();", 1);
 55                 }
 56             }
 57             else
 58             {
 59                 tableToExcel(tableid)
 60             }
 61         }
 62         function Cleanup() {
 63             window.clearInterval(Tmr);
 64             CollectGarbage();
 65         }
 66         var tableToExcel = (function() {
 67             var uri = 'data:application/vnd.ms-excel;base64,',
 68                     template = '<html><head><meta charset="UTF-8"></head><body><table>{table}</table></body></html>',
 69                     base64 = function(s) { return window.btoa(unescape(encodeURIComponent(s))) },
 70                     format = function(s, c) {
 71                         return s.replace(/{(\w+)}/g,
 72                                 function(m, p) { return c[p]; }) }
 73             return function(table, name) {
 74                 if (!table.nodeType) table = document.getElementById(table)
 75                 var ctx = {worksheet: name || 'Worksheet', table: table.innerHTML}
 76                 window.location.href = uri + base64(format(template, ctx))
 77             }
 78         })()
 79     </script>
 80 </head>
 81 <body>
 82 
 83 <div >
 84     <button type="button" onclick="method('tableExcel')">导出Excel</button>
 85 </div>
 86 
 87 
 88 <div id="myDi">
 89     <table id="tableExcel" width="100%" border="2" cellspacing="0" cellpadding="0">
 90 
 91         <tr>
 92             <td colspan="5" align="center">金庸笔下人物</td>
 93         </tr>
 94 
 95         <tr>
 96             <td>倚天屠龙记</td>
 97             <td>天龙八部</td>
 98             <td>鹿鼎记</td>
 99             <td>神雕侠侣</td>
100             <td>射雕英雄传</td>
101         </tr>
102 
103         <tr>
104             <td>张无忌</td>
105             <td>乔峰</td>
106             <td>韦小宝</td>
107             <td>杨过</td>
108             <td>郭靖</td>
109         </tr>
110 
111         <tr>
112             <td>赵敏</td>
113             <td>虚竹</td>
114             <td>康熙</td>
115             <td>小龙女</td>
116             <td>黄蓉</td>
117         </tr>
118 
119         <tr>
120             <td>周芷若</td>
121             <td>段誉</td>
122             <td>鳌拜</td>
123             <td>李莫愁</td>
124             <td>杨康</td>
125         </tr>
126 
127     </table>
128 </div>
129 </body>
130 </html>