分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 教程案例

HTML table导出到Excel中的解决办法

发布时间:2023-09-06 01:20责任编辑:郭大石关键词:HTML

第一部分:html+js

1.需要使用的表格数据(先不考虑动态生成的table)

 ???<table class="table tableStyles" id="tables"> ???????<caption>不正经的统计表</caption><!--可以生成表格的标题--> ???????<thead> ???????????<tr> ???????????????<th>品牌</th> ???????????????<th>门店</th> ???????????????<th>本周回访</th> ???????????????<th>本月回访</th> ???????????????<th>总回访</th> ???????????????<th>本周成交数</th> ???????????????<th>本月成交数</th> ???????????????<th>总成交数</th> ???????????????<th>异常量</th> ???????????????<th>成交转化率</th> ???????????????<th>经手人/th> ???????????</tr> ???????</thead> ???????<tbody> ???????????<tr> ???????????????<td rowspan="3">华为</td> ???????????????<td>华为深圳店</td> ???????????????<td>20</td> ???????????????<td>80</td> ???????????????<td>500</td> ???????????????<td>1</td> ???????????????<td>3</td> ???????????????<td>20</td> ???????????????<td>1</td> ???????????????<td>4.0%</td> ???????????????<td>黄生</td> ???????????</tr> ???????????<tr> ???????????????<td>华为东莞店</td> ???????????????<td>20</td> ???????????????<td>80</td> ???????????????<td>500</td> ???????????????<td>1</td> ???????????????<td>3</td> ???????????????<td>20</td> ???????????????<td>1</td> ???????????????<td>4.0%</td> ???????????????<td>黄生</td> ???????????</tr> ???????????<tr> ???????????????<td>华为佛山店</td> ???????????????<td>20</td> ???????????????<td>80</td> ???????????????<td>500</td> ???????????????<td>1</td> ???????????????<td>3</td> ???????????????<td>20</td> ???????????????<td>1</td> ???????????????<td>4.0%</td> ???????????????<td>黄生</td> ???????????</tr> ???????????<tr> ???????????????<td rowspan="3">小米</td> ???????????????<td>米家深圳店</td> ???????????????<td>20</td> ???????????????<td>80</td> ???????????????<td>500</td> ???????????????<td>1</td> ???????????????<td>3</td> ???????????????<td>20</td> ???????????????<td>1</td> ???????????????<td>4.0%</td> ???????????????<td>林生</td> ???????????</tr> ???????</tbody> ???</table> ???
View Code

2.Js代码

①利用html5的download属性,点击下载该文件

<a id="dlink" ?style="display:none;"></a><input type="button" onclick="tableToExcel(‘tables‘, ‘name‘, ‘myfile.xls‘)" value="Export to Excel">
 ???<script type="text/javascript"> ???????var tableToExcel = (function () { ???????????var uri = ‘data:application/vnd.ms-excel;base64,‘, ???????????????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>‘, ???????????????base64 = function (s) { return window.btoa(unescape(encodeURIComponent(s))) }, ???????????????format = function (s, c) { return s.replace(/{(\w+)}/g, function (m, p) { return c[p]; }) }; ???????????return function (table, name, filename) { ???????????????if (!table.nodeType) table = document.getElementById(table) ???????????????var ctx = { worksheet: name || ‘Worksheet‘, table: table.innerHTML } ???????????????????document.getElementById("dlink").href = uri + base64(format(template, ctx)); ???????????????document.getElementById("dlink").download = filename; ???????????????document.getElementById("dlink").click(); ???????????} ???????})() ???</script>
View Code

②创建ActiveXObject对象复制到表格中

<input id="Button1" type="button" value="导出EXCEL" onclick="javascript:excels(‘tables‘)" />
 ???<script type="text/javascript"> ???????var timer; ???????function getExplorer(){//获取浏览器 ???????????var explorer=window.navigator.userAgent; ???????????if(explorer.indexOf("MSIE") >= 0|| (explorer.indexOf("Windows NT 6.1;") >= 0 && explorer.indexOf("Trident/7.0;") >= 0)){ ???????????????return ‘ie‘; ???????????}else if (explorer.indexOf("Firefox") >= 0) { ???????????????return ‘Firefox‘; ???????????}else if(explorer.indexOf("Chrome") >= 0){ ???????????????return ‘Chrome‘; ???????????}else if(explorer.indexOf("Opera") >= 0){ ???????????????return ‘Opera‘; ???????????}else if(explorer.indexOf("Safari") >= 0){ ???????????????return ‘Safari‘; ???????????} ???????} ???????function excels(table){ ???????????if(getExplorer()==‘ie‘){ ???????????????var curTbl = document.getElementById(table); ???????????????var oXl=new ActiveXObject("Excel.Application");//创建AX对象excel ????????????????var oWB = oXL.Workbooks.Add();//获取workbook对象 ???????????????var xlsheet = oWB.Worksheets(1);//激活当前sheet ???????????????var sel = document.body.createTextRange(); ???????????????sel.moveToElementText(curTbl);//把表格中的内容移到TextRange中 ????????????????sel.select;//全选TextRange中内容 ???????????????sel.execCommand("Copy");//复制TextRange中内容 ???????????????xlsheet.Paste();//粘贴到活动的EXCEL中 ???????????????oXL.Visible = true;//设置excel可见属性 ???????????????try{ ???????????????????var filename = oXL.Application.GetSaveAsFilename("Excel.xls", "Excel Spreadsheets (*.xls), *.xls"); ???????????????}catch(e){ ???????????????????window.print("Nested catch caught " + e); ???????????????}finally{ ???????????????????oWB.SaveAs(filename); ???????????????????oWB.Close(savechanges = false); ???????????????????oXL.Quit(); ???????????????????oXL = null;//结束excel进程,退出完成 ???????????????????timer = window.setInterval("Cleanup();", 1); ???????????????} ???????????}else{ ???????????????tableToExcel("tables"); ???????????} ???????} ???????function Cleanup(){ ???????????window.clearInterval(timer); ???????????CollectGarbage();//CollectGarbage,是IE的一个特有属性,用于释放内存的 ???????} ???????var tableToExcel=(function(){ ???????????var uri = ‘data:application/vnd.ms-excel;base64,‘, ???????????????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>‘, ???????????????base64 = function(s) { return window.btoa(unescape(encodeURIComponent(s))) }, ???????????????format = function(s, c) { ???????????????????return s.replace(/{(\w+)}/g, ???????????????????function(m, p) { return c[p]; }) }; ???????????return function(table, name) { ???????????????if (!table.nodeType) table = document.getElementById(table); ???????????????var ctx = {worksheet: name || ‘Worksheet‘, table: table.innerHTML}; ???????????????window.location.href = uri + base64(format(template, ctx)) ???????????} ???????})(); ???</script>
View Code

第二部分:分析测试
测试环境(谷歌,火狐,IE,EDGE,QQ浏览器)

①.真正起到作用的是a标签的属性,input按钮只是起到了一个过渡到download属性的作用;

    其中有编码解码,需要注意中文乱码情况;

    测试只有谷歌和火狐起作用,且只有谷歌下载的文件名是“下载.xls”,火狐的文件名像是编码后的~

 双核浏览器当然也只有chrome内核下有效果~~

 我比较喜欢的一点,html中合并的单元格导出到excel中继续保留合并效果~~

    谷歌截图:

    火狐截图:

 ②.主要是利用AX对象创建excel

  在IE下不行,会提示错误“不能使用啥对象什么什么”

  难道是需要安装Office软件?没试过。。

这几个浏览器中,谷歌的体验稍微好一点,还可以自己带个命名什么的~~,其他体验都不是很友好~~

还有其他的问题是我继续需要想的,表格内容分页情况导出?筛选条件后导出全部?等等等~

附上源码注释地址:https://github.com/Chuyue0/javascript-demo/blob/master/tableExporeExcel.html

 开发过程中有很多预料不到的事,继续加油吧!

~~~~~~~~~~~~剩到最后的解决办法是利用插件~~~~~~~~~~~~

比如github上的

1020 Star:https://github.com/kayalshri/tableExport.jquery.plugin

270 Star:https://github.com/clarketm/TableExport

159 Star:https://github.com/huanz/tableExport

说明一下,星星多的插件是有base64编码,所以还额外需要js脚本!

个人比较喜欢最少星星的库,感觉明了清晰,可以按需加载~

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

HTML table导出到Excel中的解决办法

原文地址:http://www.cnblogs.com/anniey/p/7738278.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved