当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 多个浏览器下应用前端JS实现一键导出excel表

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

2019年07月26日  | 移动技术网IT编程  | 我要评论

自己试验了几种方法，找到一种较为全面的一种方式一键输出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>

输出后显示：

显示表格：

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网