js导出execl兼容ie Chrome Firefox各种主流浏览器(js export execl)
第一种导出table布局的表格
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" language="javascript">
var idTmr;
function getExplorer() {
var explorer = window.navigator.userAgent;
//ie
if(explorer.indexOf(".NET") >= 0) {
return 'ie';
}
//firefox
else if(explorer.indexOf("Firefox") >= 0) {
return 'Firefox';
}
//Chrome
else if(explorer.indexOf("Chrome") >= 0) {
return 'Chrome';
}
//Opera
else if(explorer.indexOf("Opera") >= 0) {
return 'Opera';
}
//Safari
else if(explorer.indexOf("Safari") >= 0) {
return 'Safari';
}
}
function method1(tableid, name, filename) { //整个表格拷贝到EXCEL中
if(getExplorer() == 'ie') {
var curTbl = document.getElementById(tableid);
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 fname = oXL.Application.GetSaveAsFilename("Excel.xls", "Excel Spreadsheets (*.xls), *.xls");
} catch(e) {
print("Nested catch caught " + e);
} finally {
oWB.SaveAs(fname);
oWB.Close(savechanges = false);
//xls.visible = false;
oXL.Quit();
oXL = null;
//结束excel进程，退出完成
//window.setInterval("Cleanup();",1);
idTmr = window.setInterval("Cleanup();", 1);
}
} else {
tableToExcel(tableid, name, filename)
}
}
function Cleanup() {
window.clearInterval(idTmr);
CollectGarbage();
}
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><meta charset="UTF-8"><!--[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
}
//window.location.href = uri + base64(format(template, ctx))
//<a href="/images/logo.png" download="w3clogo"> //参考a链接的下载，更改下载文件名
//<img border="0" src="/images/logo.png" alt="w3cschool.cc" >
//</a>
document.getElementById("dlink").href = uri + base64(format(template, ctx));
document.getElementById("dlink").download = filename; //这里是关键所在,当点击之后,设置a标签的属性,这样就可以更改标签的标题了
document.getElementById("dlink").click();
}
})()
</script>
<style>
.bk {
background-color: red;
color: blue;
text-align: center;
}
</style>
</head>
<body>
<table id="targetTable">
<tr align="center" id='th'>
<td>标识</td>
<td>内容</td>
<td>创建时间</td>
</tr>
<tr id="tr1" class="bk">
<a>
<td>1</td>
<td>excel01</td>
<td>2015-07-22</td>
</a>
</tr>
<tr align="center" style="background-color: red;color:yellow;">
<td>2</td>
<td>excel02</td>
<td>2015-07-22</td>
</tr>
<tr align="center" id="tr3">
<a>
<td>1</td>
<td>excel01</td>
<td>2015-07-22</td>
</a>
</tr>
</table>
</br>
<span>span</span>
<a id="dlink" style="display:none;"></a><!--隐藏链接，设置下载文件名 利用download属性-->
<input id="Button1" type="button" value="导出EXCEL" onclick="javascript:method1('targetTable', 'name', 'myfile.xls')" />
<script>
//导出execl时只有标签上的样式才会影响到导出的execl的样式，通过类渲染的最终样式没用
document.getElementById('tr3').style.backgroundColor = "yellow";
var th = document.getElementById('th');
var a = document.getElementById('tr1');
var color = window.getComputedStyle(a).getPropertyValue("background-color"); //获取最终样式，经过class渲染之后的样式
//alert(window.getComputedStyle(a).getPropertyValue("color"));
th.style.backgroundColor = color;
</script>
</body>
</html>
在template的head标签中加了<meta charset="UTF-8">(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><meta charset="UTF-8">......)，防止中文乱码。
其中利用了a标签的download属性来更改导出的execl名字，而且导出execl时只有标签上的样式才会影响到导出的execl的样式，通过类渲染的最终样式没用
第二种导出div布局的表格
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<meta charset="utf-8">
<title>项目统计</title>
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/bootstrap-datepicker3.min.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="css/layout.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="js/jquery.min.js"></script>
<script src="js/layer.js"></script>
<script src="js/bootstrap-datepicker.min.js"></script>
<script src="js/bootstrap-datepicker.zh-cn.min.js"></script>
<script type="text/javascript" language="javascript">
var idTmr;
function getExplorer() {
var explorer = window.navigator.userAgent;
//ie
if(explorer.indexOf("MSIE") >= 0) {
return 'ie';
}
//firefox
else if(explorer.indexOf("Firefox") >= 0) {
return 'Firefox';
}
//Chrome
else if(explorer.indexOf("Chrome") >= 0) {
return 'Chrome';
}
//Opera
else if(explorer.indexOf("Opera") >= 0) {
return 'Opera';
}
//Safari
else if(explorer.indexOf("Safari") >= 0) {
return 'Safari';
}
}
function method1(tableid,name, filename) { //整个表格拷贝到EXCEL中
//隐藏a链接是为了设置下载名字
if($('#dlink').length <= 0) //id为dlink的a不存在则创建一个隐藏的a
{
$('body').prepend("<a id='dlink' style='display:none;'>");
}
//判断table是不是div布局的table
if($("#" + tableid).prop("tagName") == "DIV") {
var table = $("#" + tableid).html(); //是div布局的table则重新建一个table，获取html标签替换
var tableClass=$("#" + tableid).attr('class'); //获取原来div的class
tableid = "divTableID222"; //为了第二次导出execl的时候，不与table的id重复
if($('#' + tableid).length <= 0) //id为tableid的div不存在则创建一个隐藏的div
{
$('body').prepend("</a><div id='" + tableid + "' style='display: none;'></div>");
}
$('#' + tableid).html(table); //把需要导出的内容加到这个隐藏的div中
$("#" + tableid).attr('class',tableClass); //把原来div的样式复制给隐藏div的样式
$("#" + tableid+" div[name='exportFilter']").remove(); //删除不要导出的列
//下面是替换标签
$('#' + tableid + ' .tr-th').replaceWith(function() {
return $("<tr />", {
html: $(this).html(), class:$(this).attr('class'),
//设置execl样式，必须是style属性上的，通过class渲染的不行
style:"background-color:"+window.getComputedStyle(this).getPropertyValue("background-color"),
align:"center"
});
});
$('#' + tableid + ' .th').replaceWith(function() {
return $("<th />", {
html: $(this).html(), class:$(this).attr('class'),
style:"background-color:"+window.getComputedStyle(this).getPropertyValue("background-color"),
align:"center"
});
});
$('#' + tableid + ' .tr').replaceWith(function() {
return $("<tr />", {
html: $(this).html(), class:$(this).attr('class'),
style:"background-color:"+window.getComputedStyle(this).getPropertyValue("background-color"),
align:"center"
});
});
$('#' + tableid + ' .td').replaceWith(function() {
return $("<td />", {
html: $(this).html(), class:$(this).attr('class'),
style:"background-color:"+window.getComputedStyle(this).getPropertyValue("background-color")
+";color:"+window.getComputedStyle(this).getPropertyValue("color"),
align:"center"
});
});
}
if(getExplorer() == 'ie') {
var curTbl = document.getElementById(tableid);
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 fname = oXL.Application.GetSaveAsFilename(filename||'我的execl', "Excel Spreadsheets (*.xls), *.xls");
} catch(e) {
print("Nested catch caught " + e);
} finally {
oWB.SaveAs(fname);
oWB.Close(savechanges = false);
//xls.visible = false;
oXL.Quit();
oXL = null;
//结束excel进程，退出完成
//window.setInterval("Cleanup();",1);
idTmr = window.setInterval("Cleanup();", 1);
}
} else {
tableToExcel(tableid,name, filename)
}
}
function Cleanup() {
window.clearInterval(idTmr);
CollectGarbage();
}
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><meta charset="UTF-8"><!--[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
}
//window.location.href = uri + base64(format(template, ctx))
//<a href="/images/logo.png" download="w3clogo"> //参考a链接的下载，更改下载文件名,可以添加扩展名w3clogo.jpg
//<img border="0" src="/images/logo.png" alt="w3cschool.cc" >
//</a>
document.getElementById("dlink").href = uri + base64(format(template, ctx));
document.getElementById("dlink").download = filename||'我的execl'; //这里是关键所在,当点击之后,设置a标签的属性,这样就可以更改标签的标题了
//没传参数，下载名字默认为‘我的execl’
document.getElementById("dlink").click();
}
})()
</script>
</head>
<body>
<div class="info-center">
<div class="manage-head">
<h6 class="padding-left manage-head-con">
项目统计
<a class="h5 custom-red fr margin-left" href="/ProjectEntering/Index">录入项目</a>
<a class="h5 custom-glay fr margin-left" href="/ProjectStatistics/Index?page=1&keyword=&AID=0&Project_state=&Excel=1'">导出Execl</a>
<select id="SelProject_state" class="h5 custom-glay fr margin-left" style="height: 32px; font-size: 10px; color: #565656; font-weight: normal; border: 1px solid #cecece; padding: 0 10px; margin-top: -5px;">
<option value="">状态</option>
<option value="">全部</option>
<option value="0">进行中</option>
<option value="1">完成</option>
</select>
<input id="Button1" type="button" value="导出EXCEL" onclick="javascript:method1('targetTable','name','导出execl')" />
<a class="h5 custom-glay fr margin-left" href="javascript:void();" id="akeyword" >搜索</a>
<input id="txtkeyword" value="" placeholder="请输入关键字" class="input w20 fr" style="vertical-align: top;" />
<div class="span5 col-md-5 fr" id="sandbox-container" >
<div class="input-daterange input-group" id="datepicker">
<span class="input-group-addon" style="height: 32px; margin-top: -10px; ">时间段</span>
<input id="txtstartTime" type="text" class="input-sm form-control" name="start" readonly>
<span class="input-group-addon">至</span>
<input id="txtendTime" type="text" class="input-sm form-control" name="end" readonly>
</div>
</div>
</h6>
</div>
<div id="targetTable" class="offcial-table input-table table-margin clearfix">
<div class="tr-th clearfix">
<div class="th w10">项目编号</div>
<div class="th w10">项目名称</div>
<div class="th w15">项目金额</div>
<div class="th w10">项目负责人</div>
<div class="th w10">创建时间</div>
<div class="th w10">实际总系数值</div>
<div class="th w10">预计总系数值</div>
<div class="th w10">项目状态</div>
<div class="th w15" name='exportFilter'>操作</div>
</div>
<div id="projectInfo58" class="tr clearfix tr-check">
<a href="/ProjectDetail/Index?PID=58">
<div class="td w10">987</div>
<div class="td w10">test2017</div>
<div class="td w15">¥0</div>
<div class="td w10">Katherine </div>
<div class="td w10">2017/1/13 15:02:16</div>
<div class="td w10">28</div>
<div class="td w10" style="color: blue;">20</div>
<div class="td w10">
<span class="text-blue">
进行中
</span>
</div>
<div class="td w15" name='exportFilter'>
<a href="/ProjectDetail/Index?PID=58">查看</a>
/
<a href="/ProjectEntering/Index?PID=58">修改</a>
/
<a name="aDeleteProject" data-id="58" href="javascript:viod();">删除</a>
</div>
</a>
</div>
<div id="projectInfo56" class="tr clearfix tr-check">
<a href="/ProjectDetail/Index?PID=56">
<div class="td w10">123456789</div>
<div class="td w10">test20170113</div>
<div class="td w15">¥0</div>
<div class="td w10">Katherine </div>
<div class="td w10">2017/1/13 14:00:28</div>
<div class="td w10">10</div>
<div class="td w10">9.5</div>
<div class="td w10" >
<span class="text-blue">
进行中
</span>
</div>
<div class="td w15" name='exportFilter'>
<a href="/ProjectDetail/Index?PID=56">查看</a>
/
<a href="/ProjectEntering/Index?PID=56">修改</a>
/
<a name="aDeleteProject" data-id="56" href="javascript:viod();">删除</a>
</div>
</a>
</div>
<div id="projectInfo53" class="tr clearfix ">
<a href="/ProjectDetail/Index?PID=53">
<div class="td w10">63</div>
<div class="td w10">63</div>
<div class="td w15">¥63</div>
<div class="td w10">admin</div>
<div class="td w10">2017/1/12 17:59:59</div>
<div class="td w10">96</div>
<div class="td w10">111</div>
<div class="td w10">
<span class="text-blue">
进行中
</span>
</div>
<div class="td w15" name='exportFilter'>
<a href="/ProjectDetail/Index?PID=53">查看</a>
/
<a href="/ProjectEntering/Index?PID=53">修改</a>
/
<a name="aDeleteProject" data-id="53" href="javascript:viod();">删除</a>
</div>
</a>
</div>
<div id="projectInfo52" class="tr clearfix tr-check">
<a href="/ProjectDetail/Index?PID=52">
<div class="td w10">123-456</div>
<div class="td w10">test0112</div>
<div class="td w15">¥0</div>
<div class="td w10">Katherine </div>
<div class="td w10">2017/1/12 13:46:19</div>
<div class="td w10">56</div>
<div class="td w10">20</div>
<div class="td w10">
<span class="text-blue">
进行中
</span>
</div>
<div class="td w15" name='exportFilter'>
<a href="/ProjectDetail/Index?PID=52">查看</a>
/
<a href="/ProjectEntering/Index?PID=52">修改</a>
/
<a name="aDeleteProject" data-id="52" href="javascript:viod();">删除</a>
</div>
</a>
</div>
<div id="projectInfo50" class="tr clearfix ">
<a href="/ProjectDetail/Index?PID=50">
<div class="td w10">16-12257-1</div>
<div class="td w10">CapitaLand-Chengdu</div>
<div class="td w15">¥0</div>
<div class="td w10">Frank Xu</div>
<div class="td w10">2017/1/12 11:26:14</div>
<div class="td w10">0</div>
<div class="td w10">100.2</div>
<div class="td w10">
<span class="text-blue">
进行中
</span>
</div>
<div class="td w15" name='exportFilter'>
<a href="/ProjectDetail/Index?PID=50">查看</a>
/
<a href="/ProjectEntering/Index?PID=50">修改</a>
/
<a name="aDeleteProject" data-id="50" href="javascript:viod();">删除</a>
</div>
</a>
</div>
<div id="projectInfo22" class="tr clearfix ">
<a href="/ProjectDetail/Index?PID=22">
<div class="td w10">test</div>
<div class="td w10">test</div>
<div class="td w15">¥2</div>
<div class="td w10">admin</div>
<div class="td w10">2017/1/10 16:12:29</div>
<div class="td w10">4.4</div>
<div class="td w10">10.5</div>
<div class="td w10">
<span class="text-green">完成</span>
</div>
<div class="td w15" name='exportFilter'>
<a href="/ProjectDetail/Index?PID=22">查看</a>
</div>
</a>
</div>
</div>
<!-------------分页开始-------------->
<div class="show-page padding-big-right ">
<div class="page">
<ul class="offcial-page margin-top margin-big-right">
<li>共<em class="margin-small-left margin-small-right">6</em>条数据</li>
<li>每页显示<em class="margin-small-left margin-small-right">15</em>条</li>
<li>
<a class="next disable" href="javascript:void();" id="aPre">上一页</a>
</li>
<li>
<a class="next disable">1</a>
</li>
<li>
<a class="next disable" href="javascript:void();" id="aNext">下一页</a>
</li>
<li><span class="fl">共<em class="margin-small-left margin-small-right">1</em>页</span></li>
</ul>
</div>
</div>
<!-------------分页结束-------------->
</div>
</body>
</html>
这种方式实际是把div处理了一下，重新创建了一个隐藏的div，把div布局的内容转换成table布局的内容放到隐藏的div中，中间用了jq的标签替换。(有更好的方法欢迎讨论)
$('#' + tableid + ' .tr-th').replaceWith(function() {
return $("<tr />", {
html: $(this).html(), class:$(this).attr('class'),
//设置execl样式，必须是style属性上的，通过class渲染的不行
style:"background-color:"+window.getComputedStyle(this).getPropertyValue("background-color"),
align:"center"
});
});
jq替换标签
里面用到基于bootstrap的时间控件 资源下载
js导出execl兼容ie Chrome Firefox各种主流浏览器(js export execl)的更多相关文章
- js导出execl 兼容ie Chrome Firefox各种主流浏览器(js export execl)
第一种导出table布局的表格 1 <html> 2 3 <head> 4 <meta charset="utf-8"> 5 <scrip ...
- Js 日期选择，可以的一个页面中重复使用本JS日历，兼容IE及火狐等主流浏览器，而且界面简洁、美观，操作体验也不错。
<html> <head> <title>Js日期选择器并自动加入到输入框中</title> <meta http-equiv="con ...
- atitit..主流 浏览器 js 发动机 内核 市场份额 attialx总结vOa9
atitit..主流 浏览器 js 发动机 内核 市场份额 attialx总结vOa9 1. 浏览器内核 1 2. 浏览器的主要组件包含: 2 2.1. 主要组件体系结构 2 2.2. WebCor ...
- atitit..主流 浏览器 js 引擎 内核 市场份额 attialx总结vOa9
atitit..主流 浏览器 js 引擎 内核 市场份额 attialx总结vOa9 1. 浏览器内核 1 2. 浏览器的主要组件包括: 2 2.1. 主要组件体系结构 2 2.2. WebCore ...
- 主流浏览器js 引擎内核市场份额attialx总结vOa9
原文: http://blog.csdn.net/attilax/article/details/40016... 时间: 2014-10-12 atitit.. 主流浏览器 js 引擎 内核 市场份 ...
- 【Bootstrap】一个兼容IE8、谷歌等主流浏览器的受众门户式风格页面
上一次写的<[Bootstrap]一个兼容IE8.谷歌等主流浏览器的受众巨幕式风格页面>(点击打开链接) 部分老一辈的需求可能对这样的后现代的风格并不惬意, 没关系,我们全然能够改变布局 ...
- Chrome firefox ie等浏览器空格 宽度不一样怎么办
有点强迫症,之前某个页面用了空格 ,但是在chrome firefox 和ie显示的宽度都不一样,无法对齐. 搜索了一下,很多人都转载了那篇设置成宋体的,可是仍然没对齐,要么ie对齐,要么chrome ...
- JS导出excel 兼容ie、chrome、firefox
运用js实现将页面中的table导出为excel文件,页面显示如下: 导出的excel文件显示如下: 实现代码: <!DOCTYPE html> <html> <head ...
- 使用JavaScript / JQuery导出 html table 数据至 Excel 兼容IE/Chrome/Firefox
function fnExcelReport() { var tab_text="<table border='2px'><tr bgcolor='#87AFC6'> ...
随机推荐
- C#泛型回顾点滴
前言 C#的泛型一直是学习者津津乐道的课题了,这确实是一个非常有用的特性,不过在实际使用中,还是有很多需要注意的地方,我们需要通过自己动手实践以及结合理论进行理解,最终总结出自己的编码规范和最佳实践 ...
- nginx配置文件中的location详解
location 语法:location [=|~|~*|^~] /uri/ { … } 默认:否 上下文:server 这个指令随URL不同而接受不同的结构.你可以配置使用常规字符串和正则表达式.如 ...
- nginx启动，重启，关闭命令
nginx启动,重启,关闭命令 停止操作停止操作是通过向nginx进程发送信号(什么是信号请参阅linux文 章)来进行的步骤1:查询nginx主进程号ps -ef | grep nginx在进程列表 ...
- knockout同时绑定多个实体demo
1.我们会遇到一种情景:一个页面实现复杂的功能时,我们往往会使用部分页(.netmvc中的@renderaction,java中ajax请求jsp页面). 如果子页面也使用knockout绑定数据会不 ...
- MVC Bootstrap极速开发框架
ASP.NET MVC Bootstrap极速开发框架 前言 每次新开发项目都要从头开始设计?有木有一个通用的快速开发框架?并且得是ASP.NET MVC And Bootstrap?数据库不要手工 ...
- 个人总结js客户端验证
//郭泽峰个人总结总结(2012-12-5): //备注:当 regu是字符串时应示例对象RegExp,否则的话 var emailReg =/在此加上正则/ //验证邮箱 function Chec ...
- Akka入门实例
Akka入门实例 Akka 是一个用 Scala 编写的库,用于简化编写容错的.高可伸缩性的 Java 和 Scala 的 Actor 模型应用. Actor模型并非什么新鲜事物,它由Carl Hew ...
- Java学习笔记——JDBC之PreparedStatement类中“预编译”的综合应用
预编译 SQL 语句被预编译并存储在 PreparedStatement 对象中.然后可以使用此对象多次高效地执行该语句. 预编译的优点 1.PreparedStatement是预编译的,对于批量处理 ...
- YPreLoad
Javascript库 发布我的控件系列:图片预加载控件YPreLoad v1.0 摘要: 介绍大家好!很高兴向大家介绍我的图片预加载控件YPreLoad.它可以帮助您预加载图片,并且能显示加载的 ...
- SQL Server的数据加密简介
防止开发人员获取到敏感数据(SQL Server的数据加密简介) 背景 有时候,我们还真的会碰到这样的需求:防止开发人员获取到敏感数据.也许你觉得很简单,把开发和运营分开不就可以了吗?是的,如果公司有 ...