1 js导出Excel
2 <!DOCTYPE html>
3 <html>
4 <head>
5 <meta charset="UTF-8">
6 <style type="text/css">
7 table{border-collapse: collapse; }
8 th, td{border: 1px solid #4d4d4d;padding: 5px; }
9 </style>
10 <script type="text/javascript" language="javascript">
11 var idTmr;
12 function getExplorer() {
13 var explorer = window.navigator.userAgent ;
14 //ie
15 if (explorer.indexOf("MSIE") >= 0) {
16 return 'ie';
17 }
18 //firefox
19 else if (explorer.indexOf("Firefox") >= 0) {
20 return 'Firefox';
21 }
22 //Chrome
23 else if(explorer.indexOf("Chrome") >= 0){
24 return 'Chrome';
25 }
26 //Opera
27 else if(explorer.indexOf("Opera") >= 0){
28 return 'Opera';
29 }
30 //Safari
31 else if(explorer.indexOf("Safari") >= 0){
32 return 'Safari';
33 }
34 }
35 function method1(tableid) {//整个表格拷贝到EXCEL中
36 if(getExplorer()=='ie') {
37 var curTbl = document.getElementById(tableid);
38 var oXL = new ActiveXObject("Excel.Application");
39
40 //创建AX对象excel
41 var oWB = oXL.Workbooks.Add();
42 //获取workbook对象
43 var xlsheet = oWB.Worksheets(1);
44 //激活当前sheet
45 var sel = document.body.createTextRange();
46 sel.moveToElementText(curTbl);
47 //把表格中的内容移到TextRange中
48 sel.select;
49 //全选TextRange中内容
50 sel.execCommand("Copy");
51 //复制TextRange中内容
52 xlsheet.Paste();
53 //粘贴到活动的EXCEL中
54 oXL.Visible = true;
55 //设置excel可见属性
56
57 try {
58 var fname = oXL.Application.GetSaveAsFilename("Excel.xls", "Excel Spreadsheets (*.xls), *.xls");
59 } catch (e) {
60 print("Nested catch caught " + e);
61 } finally {
62 oWB.SaveAs(fname);
63
64 oWB.Close(savechanges = false);
65 //xls.visible = false;
66 oXL.Quit();
67 oXL = null;
68 //结束excel进程,退出完成
69 //window.setInterval("Cleanup();",1);
70 idTmr = window.setInterval("Cleanup();", 1);
71 }
72 } else {
73 tableToExcel('ta')
74 }
75 }
76 function Cleanup() {
77 window.clearInterval(idTmr);
78 CollectGarbage();
79 }
80
81 /*
82 template : 定义文档的类型,相当于html页面中顶部的<!DOCTYPE> 声明。(个人理解,不确定)
83 encodeURIComponent:解码
84 unescape() 函数:对通过 escape() 编码的字符串进行解码。
85 window.btoa(window.encodeURIComponent(str)):支持汉字进行解码。
86 \w :匹配包括下划线的任何单词字符。等价于’[A-Za-z0-9_]’
87 replace()方法:用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串。
88 {(\w+)}:匹配所有 {1个或更多字符} 形式的字符串;此处匹配输出内容是 “worksheet”
89 正则中的() :是为了提取匹配的字符串。表达式中有几个()就有几个相应的匹配字符串。
90 讲解(/{(\w+)}/g, function(m, p) { return c[p]; } :
91 /{(\w+)}/g 匹配出所有形式为“{worksheet}”的字符串;
92 function参数: m 正则所匹配到的内容,即“worksheet”;
93 p 正则表达式中分组的内容,即“(\w+)”分组中匹配到的内容,为“worksheet”;
94 c :为object,见下图3
95 c[p] : 为“worksheet”
96
97 */
98 var tableToExcel = (function() {
99 /*
100 * 设置样式 有2个方法 1.直接写style 属性 2.在模板中加样式代码 如下
101 * */
102 var uri = 'data:application/vnd.ms-excel;base64,',
103 //template = '<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><table>{table}</table></body></html>',
104 template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel"' +
105 'xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>'
106 + '<x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets>'
107 + '</x:ExcelWorkbook></xml><![endif]-->' +
108 ' <style type="text/css">' +
109 'table td {' +
110 'border: 1px solid #000000;' +
111 'width: 200px;' +
112 'height: 30px;' +
113 ' text-align: center;' +
114 'background-color: #4f891e;' +
115 'color: #ffffff;' +
116 ' }' +
117 '</style>' +
118 '</head><body ><table class="excelTable">{table}</table></body></html>';
119 base64 = function(s) {
120 return window.btoa(unescape(encodeURIComponent(s)))
121 },
122 // 下面这段函数作用是:将template中的变量替换为页面内容ctx获取到的值
123 format = function(s, c) {
124 return s.replace(/{(\w+)}/g,
125 function(m, p) {
126 return c[p];
127 }
128 )
129 };
130 return function(table, name) {
131 if (!table.nodeType) {
132 table = document.getElementById(table)
133 }
134 // 获取表单的名字和表单查询的内容
135 var ctx = {worksheet: name || 'Worksheet', table: table.innerHTML};
136 // format()函数:通过格式操作使任意类型的数据转换成一个字符串
137 // base64():进行编码
138 window.location.href = uri + base64(format(template, ctx))
139 // 下面这个是自定义文件名的
140 document.getElementById("exportExcel").href = uri
141 + base64(format(template, ctx));
142 document.getElementById("exportExcel").download = name + ".xls";//自定义文件名
143 document.getElementById("exportExcel").click(); }
144 })()
145 </script>
146
147 </head>
148 <body>
149 <table id="ta">
150 <tr>
151 <th></th>
152 <th>一</th>
153 <th>二</th>
154 <th>三</th>
155 <th>四</th>
156 </tr>
157 <tr>
158 <td>万籁寂无声</td>
159 <td>衾铁棱棱近五更</td>
160 <td>香断灯昏吟未稳</td>
161 <td>凄清</td>
162 <td>只有霜华伴月明</td>
163 </tr>
164 <tr>
165 <td>应是夜寒凝</td>
166 <td>恼得梅花睡不成</td>
167 <td>我念梅花花念我</td>
168 <td>关情</td>
169 <td>起看清冰满玉瓶</td>
170 </tr>
171 </table>
172 <br/>
173 <input type="button" value="导出EXCEL" onclick="method1('ta')" />
174 </body>
175 </html>