多个浏览器下应用前端JS实现一键导出excel表
程序员文章站
2022-03-23 13:33:39
自己试验了几种方法，找到一种较为全面的一种方式一键输出Excel表格，代码如下 输出后显示： 显示表格： ......
自己试验了几种方法，找到一种较为全面的一种方式一键输出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>
输出后显示：
显示表格：