注意：IE浏览器需要以下设置：
打开IE，在常用工具栏中选择“工具”--->Internet选项---->选择"安全"标签页--->选择"自定义级别"--->弹出的窗口中找到ActiveX控件和插件--->
将"ActiveX控件自动提示"
"对没有标记安全的ActiveX控件进行初始化和脚本运行"
"下载未签名的ActiveX控件"
三项 选择启用 即可!
HtmlExportToExcel.js 代码
1 /*
2 * HTML导出Excel文件(兼容IE及所有浏览器)
3 * @param {any} tableid table父元素ID
4 * @param {any} filename 文件名称
5 */
6 function HtmlExportToExcel(tableid, filename) {
7 if (getExplorer() === ‘ie‘ || getExplorer() === undefined) {
8 HtmlExportToExcelForIE(tableid, filename);
9 }
10 else {
11 HtmlExportToExcelForEntire(tableid, filename);
12 }
13 }
14
15 //IE浏览器导出Excel
16 function HtmlExportToExcelForIE(tableId, filename) {
17 try {
18 var oXL = new ActiveXObject("excel.Application");
19 //oXL.Visible = true;
20 //oXL.ScreenUpdating = false;
21 } catch (e1) {
22 try {
23 oXL = new ActiveXObject("et.Application");
24 } catch (e2) {
25 alert(e2.description + "\n\n\n要使用EXCEL对象，您必须安装Excel电子表格软件\n或者,需要安装Kingsoft ET软件\n\n同时浏览器须使用“ActiveX 控件”，您的浏览器须允许执行控件。");
26 return;
27 }
28 }
29 //创建AX对象excel
30 var oWB = oXL.Workbooks.Add();
31 //获取workbook对象
32 var xlsheet = oWB.Worksheets(1);
33
34 var elTable = document.getElementById(tableId);
35
36 //替换掉表格td中隐藏的html元素
37 var tableHtml = ReplaceHtml(elTable.innerHTML);
38
39 var newTable = document.getElementById("newData");
40 //console.log();
41 newTable.innerHTML = tableHtml;
42
43 //激活当前sheet
44 var sel = document.body.createTextRange();
45 sel.moveToElementText(newTable);
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 newTable.innerHTML = "";
57
58 try {
59 //设置 sheet 名称
60 xlsheet.Name = filename;
61 var fname = oXL.Application.GetSaveAsFilename(filename + ".xls", "Excel Spreadsheets (*.xls), *.xls");
62 } catch (e) {
63 print("Nested catch caught " + e);
64 } finally {
65 oWB.SaveAs(fname);
66 oWB.Close();
67 //xls.visible = false;
68 oXL.ScreenUpdating = true;
69 oXL.Quit();
70 }
71 }
72
73 //非IE浏览器导出Excel
74 var HtmlExportToExcelForEntire = (function () {
75 var uri = ‘data:application/vnd.ms-excel;base64,‘,
76 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]-->‘ +
77 /**********这部分是加载表格的样式 没有样式可以省略 start**********/
78 ‘<style type="text/css">‘ +
79 ‘.tablefrom {width: 100%;border-collapse: collapse;}‘ +
80 ‘.tablefrom, .tablefrom td, .tablefrom th {text-align: center;font: 12px Arial, Helvetica, sans-serif;border: 1px solid #fff;}‘ +
81 ‘.tablefrom th{background:#328aa4;color:#fff;}‘ +
82 ‘.tablefrom td{background:#e5f1f4;}‘ +
83 ‘.tablefrom .BlueBgColor td {color: #fff;background-color: #0070c0;}‘ +
84 ‘.tablefrom .LightBlueBgColor td {color: #000000;background-color: #bdd7ee;}‘ +
85 ‘.tablefrom tr .BlueBgColorTd { color: #fff;background-color: #0070c0;}‘ +
86 ‘.tablefrom tr .LightBlueBgColorTd {color: #000000;background-color: #bdd7ee;}‘ +
87 ‘</style>‘
88 /**********这部分是加载表格的样式 没有样式可以省略 end**********/
89 + ‘</head><body>{table}</body></html>‘,
90 base64 = function (s) { return window.btoa(unescape(encodeURIComponent(s))); },
91 format = function (s, c) { return s.replace(/{(\w+)}/g, function (m, p) { return c[p]; }); };
92 return function (table, name) {
93 if (!table.nodeType) { table = document.getElementById(table); }
94 //替换掉表格td中隐藏的html元素
95 var strHTML = ReplaceHtml(table.innerHTML);
96 var ctx = { worksheet: name || ‘Worksheet‘, table: strHTML };
97
98 document.getElementById("dlink").href = uri + base64(format(template, ctx));
99 document.getElementById("dlink").download = name + ".xls";
100 document.getElementById("dlink").click();
101 };
102 })();
103
104 //获取当前使用浏览器
105 function getExplorer() {
106 var explorer = window.navigator.userAgent;
107 //ie
108 if (explorer.indexOf("MSIE") >= 0) {
109 return ‘ie‘;
110 }
111 //firefox
112 else if (explorer.indexOf("Firefox") >= 0) {
113 return ‘Firefox‘;
114 }
115 //Chrome
116 else if (explorer.indexOf("Chrome") >= 0) {
117 return ‘Chrome‘;
118 }
119 //Opera
120 else if (explorer.indexOf("Opera") >= 0) {
121 return ‘Opera‘;
122 }
123 //Safari
124 else if (explorer.indexOf("Safari") >= 0) {
125 return ‘Safari‘;
126 }
127 }
128
129 //将隐藏的HTML元素替换掉
130 function ReplaceHtml(tableHtml) {
131 var radioValue = $(‘input[name="bedStatus"]:checked ‘).val();
132 if (radioValue === ‘yuan‘) {
133 tableHtml = tableHtml.replace(/<span class="span_wanyuan" [^<>]*?>(.*?)<\/span>/gi, "");
134 }
135 else if (radioValue === ‘wanyuan‘) {
136 tableHtml = tableHtml.replace(/<span class="span_yuan" [^<>]*?>(.*?)<\/span>/gi, "");
137 }
138 return tableHtml;
139 }
另外，我的功能需要替换掉td中隐藏的html元素，所以需要将新的table复制到另一个隐藏的div中。
页面html代码：
1 <div id="divData"> 2 <table class="tablefrom" id="tbData" style="width: 100%; border-collapse: collapse;" border="0" cellspacing="0"> 3 <tbody> 4 <tr> 5 <th rowspan="2" colspan="2" scope="col">序号</th> 6 <th style="min-width: 70px;" rowspan="2" scope="col">项目</th> 7 <th style="min-width: 50px;" rowspan="2" scope="col">维度</th> 8 <th style="min-width: 50px;" rowspan="2" scope="col">本月资金</th> 9 <th rowspan="2" colspan="1" scope="col">某部门</th> 10 <th colspan="2" scope="col">支付</th> 11 </tr> 12 <tr> 13 <th style="min-width: 50px;" scope="col">执行</th> 14 <th style="min-width: 50px;" scope="col">余额</th> 15 </tr> 16 <tr> 17 <td style="color: rgb(0, 0, 0); font-weight: bold; background-color: rgb(189, 215, 238);" rowspan="163" scope="col">经营费用类</td> 18 <td style="min-width: 50px;" rowspan="3" scope="col">1</td> 19 <td rowspan="3" scope="col">销售退款</td> 20 <td scope="col">实际</td> 21 <td style="color: rgb(0, 0, 0); background-color: rgb(189, 215, 238);" scope="col"><span class="span_yuan">100000</span><span class="span_wanyuan" style="display: none;">10</span></td> 22 <td scope="col"><span class="span_yuan">100000</span><span class="span_wanyuan" style="display: none;">10</span></td> 23 <td scope="col"><span class="span_yuan">100000</span><span class="span_wanyuan" style="display: none;">10</span></td> 24 <td scope="col"><span class="span_yuan">900000</span><span class="span_wanyuan" style="display: none;">90</span></td> 25 </tr> 26 <tr> 27 <td scope="col">计划</td> 28 <td style="color: rgb(0, 0, 0); background-color: rgb(189, 215, 238);" scope="col"><span class="span_yuan">1000000</span><span class="span_wanyuan" style="display: none;">100</span></td> 29 <td scope="col"><span class="span_yuan">1000000</span><span class="span_wanyuan" style="display: none;">100</span></td> 30 <td scope="col">-</td> 31 <td scope="col">-</td> 32 </tr> 33 <tr> 34 <td scope="col">差额</td> 35 <td style="color: rgb(0, 0, 0); background-color: rgb(189, 215, 238);" scope="col"><span class="span_yuan">900000</span><span class="span_wanyuan" style="display: none;">90</span></td> 36 <td scope="col"><span class="span_yuan">900000</span><span class="span_wanyuan" style="display: none;">90</span></td> 37 <td scope="col">-</td> 38 <td scope="col">-</td> 39 </tr> 40 </tbody> 41 </table> 42 </div> 43 <div id="newData" style="display: none;"></div>
原文地址：https://www.cnblogs.com/wsk198726/p/9707029.html
时间： 2024-10-09 01:25:56