HTML导出Excel文件(兼容IE及所有浏览器)

程序员文章站 2022-06-05 12:44:04

注意：IE浏览器需要以下设置：打开IE，在常用工具栏中选择“工具” >Internet选项 >选择"安全"标签页 >选择"自定义级别" >弹出的窗口中找到ActiveX控件和插件 >将"ActiveX控件自动提示""对没有标记安全的ActiveX控件进行初始化和脚本运行""下载未签名的Active ......

注意：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 }

view code

另外，我的功能需要替换掉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>

view code

上一篇：揭秘康熙为何两次废太子最后却让雍正捡了便宜

下一篇： RecyclerView的简单使用

HTML导出Excel文件(兼容IE及所有浏览器)

HTML导出Excel文件(兼容IE及所有浏览器)

使用JavaScript / JQuery导出 html table 数据至 Excel 兼容IE/Chrome/Firefox

运用html2canvas.js将div导出为图片，适用所有浏览器兼容性

JS兼容浏览器的导出Excel（CSV）文件的方法_javascript技巧

HTML导出Excel文件(兼容IE及所有浏览器)

使用JavaScript / JQuery导出 html table 数据至 Excel 兼容IE/Chrome/Firefox

html5 video.js 使用及兼容所有浏览器

html5 video.js 使用及兼容所有浏览器

JS兼容浏览器的导出Excel（CSV）文件的方法_javascript技巧

IE浏览器和Firefox浏览器兼容性问题及解决办法_html/css_WEB-ITnose