HTML table导出到Excel中的解决办法
第一部分：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>
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>
②创建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>
第二部分：分析测试
测试环境（谷歌，火狐，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中的解决办法的更多相关文章
- html table表格导出excel的方法 html5 table导出Excel HTML用JS导出Excel的五种方法 html中table导出Excel 前端开发 将table内容导出到excel HTML table导出到Excel中的解决办法 js实现table导出Excel，保留table样式
先上代码 <script type="text/javascript" language="javascript"> var idTmr; ...
- C# html的Table导出到Excel中
C#中导出Excel分为两大类.一类是Winform的,一类是Web.今天说的这一种是Web中的一种,把页面上的Table部分导出到Excel中. Table导出Excel,简单点说,分为以下几步: ...
- html table导出到Excel中，不走后台，js完成
静态表格table <table class="table tableStyles" id="tables"> <caption>不正经 ...
- html table导出到Excel中，走后台保存文件，js并调用另保存
tableToExcel工具类,此工具类指定格式的表格进行转Excel 格式:其中不能带有thead,tbody和th标签 <table> <tr> <td>表头1 ...
- 【ASP.NET】C# 将HTML中Table导出到Excel（TableToExcel）
首先,说下应用场景 就是,把页面呈现的Table 导出到Excel中.其中使用的原理是 前台使用ajax调用aspx后台,传递过去参数值,导出.使用的组件是NPOI. 前台调用: <script ...
- HTML Table导出为Excel的方法
HTML Table导出为Excel的方法: 直接上源码 <html> <head> <meta http-equiv="Content-Type" ...
- 将datagrid中数据导出到excel中 -------<<工作日志2014-6-6>>
前台datagrid数据绑定 #region 导出到excel中 /// <summary> /// 2014-6-6 /// </summary> / ...
- 将Datagridview中的数据导出至Excel中
首先添加一个模块ImportToExcel,并添加引用 然后导入命名空间: Imports Microsoft.Office.Interop Imports System.Da ...
- html table 保存到excel中
引用:HTML中的table导出为Excel文件 <!DOCTYPE html> <html lang="en"> <head> <met ...
随机推荐
- nio例子
跟传统io相比,nio会支持更大的并发量 nio去除了传统io的连接阻塞,和读写阻塞 服务器端 客户端 nio模型 传统io nio
- 6种原型设计工具大比对！ Axure,Invision, 墨刀……哪款适合你？
每一年的毕业季都是找工作高峰时期,产品经理.UI设计师这些岗位都会接触到原型设计工具.选择原型设计工具最重要的一点:适合自己的才是最好的! 下文将对目前超火的原型工具进行大对比,快来看看那一款于你而言 ...
- Python类中的__init__() 和 self 的解析
原文地址https://www.cnblogs.com/ant-colonies/p/6718388.html 1.Python中self的含义 self,英文单词意思很明显,表示自己,本身. 此处有 ...
- linux 下tftpf搭建
什么是TFTP服务 TFTP(Trivial File Transfer Protocol,简单文件传输协议) 是TCP/IP协议族中的一个用来在客户机与服务器之间进行 简单文件传输的协 ...
- 0006-20180422-自动化第七章-python基础学习笔记
内容回顾: - bytes - str 和bytes - int - str - list - tuple - 深拷贝和浅拷贝 今日内容: 数据类型 - bytes - int - str - boo ...
- "远程服务器返回错误: (500) 内部服务器错误"错误处理
公司购买的百傲瑞达一卡通软件,提供Restful API调用,使用SoapUI能够调用成功,但在C#里用代码调用时一直报错:"远程服务器返回错误: (500) 内部服务器错误" 找 ...
- URIError: Failed to decode param '/%PUBLIC_URL%/favicon.ico'
今天搭建antd的项目结构,本来项目是一个基础react项目,结果执行 yarn create umi yarn yarn start 项目启动后访问突然报错URIError: Failed to d ...
- 11个简单的Java性能调优技巧，傻瓜都能学会！
大多数开发人员理所当然地以为性能优化很复杂,需要大量的经验和知识.好吧,不能说这是完全错误的.优化应用程序以获得最佳性能不是一件容易的事情.但是,这并不意味着如果你不具备这些知识,就不能做任何事情. ...
- SQLServer “无法对数据库'XX' 执行删除，因为它正用于复制”的解决方法
修改数据库某个字段的长度时出现: “无法修改表.无法对 表'dbo.N_Client_content' 执行 删除,因为它正用于复制.” 不能直接对该数据库进行操作,通过alter 的办法来修改,问题 ...
- AJAX理解
注:首先我们要明白请求是什么?请求分两种,一.静态请求(如:返回js.css.图片等) 二.动态请求(返回跟用户有关的数据) http(apache.nginx等)服务器会判断如果是一个静态请求,会直 ...