JS导出excel设置下载的标题/与angular结合冲突
2017-03-02 11:09
656 查看
2017.8更新
此功能与angular结合使用时，最后一行 document.getElementById("dlink").click(); 与angular的ng-click 有冲突，删掉最后一行即可。
之前写过一篇js导出excel的文章， 发现下载的文件名为“下载”，如何修改文件名呢？找了一些文章还是不太明白，经牛人指点，幡然领悟。注意看红字标明部分
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <style type="text/css">
6 table{border-collapse: collapse; }
7 th, td{border: 1px solid #4d4d4d;padding: 5px; }
8 </style>
9 <script type="text/javascript" language="javascript">
10 var idTmr;
11 function getExplorer() {
12 var explorer = window.navigator.userAgent ;
13 //ie
14 if (explorer.indexOf("MSIE") >= 0) {
15 return 'ie';
16 }
17 //firefox
18 else if (explorer.indexOf("Firefox") >= 0) {
19 return 'Firefox';
20 }
21 //Chrome
22 else if(explorer.indexOf("Chrome") >= 0){
23 return 'Chrome';
24 }
25 //Opera
26 else if(explorer.indexOf("Opera") >= 0){
27 return 'Opera';
28 }
29 //Safari
30 else if(explorer.indexOf("Safari") >= 0){
31 return 'Safari';
32 }
33 }
34 function method1(tableid) {//整个表格拷贝到EXCEL中
35 if(getExplorer()=='ie') {
36 var curTbl = document.getElementById(tableid);
37 var oXL = new ActiveXObject("Excel.Application");
38
39 //创建AX对象excel
40 var oWB = oXL.Workbooks.Add();
41 //获取workbook对象
42 var xlsheet = oWB.Worksheets(1);
43 //激活当前sheet
44 var sel = document.body.createTextRange();
45 sel.moveToElementText(curTbl);
46 //把表格中的内容移到TextRange中
47 sel.select;
48 //全选TextRange中内容
49 sel.execCommand("Copy");
50 //复制TextRange中内容
51 xlsheet.Paste();
52 //粘贴到活动的EXCEL中
53 oXL.Visible = true;
54 //设置excel可见属性
55
56 try {
57 var fname = oXL.Application.GetSaveAsFilename("Excel.xls", "Excel Spreadsheets (*.xls), *.xls");
58 } catch (e) {
59 print("Nested catch caught " + e);
60 } finally {
61 oWB.SaveAs(fname);
62
63 oWB.Close(savechanges = false);
64 //xls.visible = false;
65 oXL.Quit();
66 oXL = null;
67 //结束excel进程，退出完成
68 //window.setInterval("Cleanup();",1);
69 idTmr = window.setInterval("Cleanup();", 1);
70 }
71 } else {
72 tableToExcel('ta','demo1','AAAA')
73 }
74 }
75 function Cleanup() {
76 window.clearInterval(idTmr);
77 CollectGarbage();
78 }
79
80 /*
81 template ： 定义文档的类型，相当于html页面中顶部的<!DOCTYPE> 声明。（个人理解，不确定）
82 encodeURIComponent:解码
83 unescape() 函数：对通过 escape() 编码的字符串进行解码。
84 window.btoa(window.encodeURIComponent(str)):支持汉字进行解码。
85 \w ：匹配包括下划线的任何单词字符。等价于’[A-Za-z0-9_]’
86 replace()方法：用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。
87 {(\w+)}：匹配所有 {1个或更多字符} 形式的字符串；此处匹配输出内容是 “worksheet”
88 正则中的() ：是为了提取匹配的字符串。表达式中有几个()就有几个相应的匹配字符串。
89 讲解(/{(\w+)}/g, function(m, p) { return c[p]; } ：
90 /{(\w+)}/g 匹配出所有形式为“{worksheet}”的字符串；
91 function参数： m 正则所匹配到的内容，即“worksheet”；
92 p 正则表达式中分组的内容,即“(\w+)”分组中匹配到的内容，为“worksheet”；
93 c ：为object，见下图3
94 c[p] : 为“worksheet”
95
96 */
97 var tableToExcel = (function() {
98 var uri = 'data:application/vnd.ms-excel;base64,',
99 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>',
100 base64 = function(s) {
101 return window.btoa(unescape(encodeURIComponent(s)))
102 },
103 // 下面这段函数作用是：将template中的变量替换为页面内容ctx获取到的值
104 format = function(s, c) {
105 return s.replace(/{(\w+)}/g,
106 function(m, p) {
107 return c[p];
108 }
109 )
110 };
111 return function(table, name, filename) {
112 if (!table.nodeType) {
113 table = document.getElementById(table)
114 }
115 // 获取表单的名字和表单查询的内容
116 var ctx = {worksheet: name || 'Worksheet', table: table.innerHTML};
117 // format()函数：通过格式操作使任意类型的数据转换成一个字符串
118 // base64()：进行编码
119 // window.location.href = uri + base64(format(template, ctx))
120 document.getElementById("dlink").href = uri + base64(format(template, ctx));
121 document.getElementById("dlink").download = filename; //这里是关键所在,当点击之后,设置a标签的属性,这样就可以更改标签的标题了
122 document.getElementById("dlink").click();
123 }
124 })()
125 </script>
126
127 </head>
128 <body>
129 <table id="ta">
130 <tr>
131 <th></th>
132 <th>一</th>
133 <th>二</th>
134 <th>三</th>
135 <th>四</th>
136 </tr>
137 <tr>
138 <td>万籁寂无声</td>
139 <td>衾铁棱棱近五更</td>
140 <td>香断灯昏吟未稳</td>
141 <td>凄清</td>
142 <td>只有霜华伴月明</td>
143 </tr>
144 <tr>
145 <td>应是夜寒凝</td>
146 <td>恼得梅花睡不成</td>
147 <td>我念梅花花念我</td>
148 <td>关情</td>
149 <td>起看清冰满玉瓶</td>
150 </tr>
151 <tr>
152 <td style="mso-number-format:'\@'">145846124548921216561358946132</td>
153 <td style="mso-number-format:'\@'">574878924876134982136489746997</td>
154 <td style="mso-number-format:'\@'">452354689686353596814584645382</td>
155 <td style="mso-number-format:'\@'">56369+534678645354686638946132</td>
156 <td style="mso-number-format:'\@'">785325345636351216561358946132</td>
157 </tr>
158 </table>
159 <br/>
160 <a id="dlink" style="display:none;"></a> //这里是在你点击导出的按钮上方增加一个隐藏的a标签,只是为了更改标题内容
161 <input type="button" value="导出EXCEL" onclick="method1('ta')" />
162 </body>
163 </html>之前关于js导出excel的文章：http://www.cnblogs.com/zhangym118/p/6235801.html
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- js 导出excel,设置下载的标题
- js 导出excel,设置下载的标题
- js 使用前端导出excel,设置标题和页脚,实现特殊表格需求
- excel导出插件失败解决（原标题JS new ActiveXObject("Excel.Application")产生的问题）
- poi导出Excel与项目的结合-案例（包含图片的设置）
- spring boot+angularjs文件下载设置setHeader
- NPOI导出EXCEL 打印设置分页及打印标题
- SpringBoot+AngularJS导出数据库数据到excel
- nodejs Excel的下载导出
- Angularjs ui-grid pdfmake.js 导出excel/pdf及pdf中文问题
- js导出excel到客户端下载
- 关于js导出excel的标题日期问题
- JS实现导出Excel的五种方法详解【附源码下载】
- asp.net 生成导出word表单 ,导出excel; dataTable生成xls文件，返回前台下载;asp.net启动excel错误 80070005;excel-xls columnName 不能改变; 读写excel的开源利器NPOI; 设置excel Cell的数据类型;
- AngularJS+Jersey下载excel
- Spring Boot+AngularJS导出excel
- poi导出Excel与项目的结合-案例（包含图片的设置）
- 【MVC】AngularJs+KendoUI开发报表Demo（导出Excel和折线图）
- EasyUI 结合JS导出Excel文件的实现方法
- Spring Boot+AngularJS导出excel