HTML导出Excel文件(兼容IE及所有浏览器)
注意：IE浏览器需要以下设置：
打开IE，在常用工具栏中选择“工具”--->Internet选项---->选择"安全"标签页--->选择"自定义级别"--->弹出的窗口中找到ActiveX控件和插件--->
将"ActiveX控件自动提示"
"对没有标记安全的ActiveX控件进行初始化和脚本运行"
"下载未签名的ActiveX控件"
三项 选择启用 即可!
HtmlExportToExcel.js 代码
/*
* HTML导出Excel文件(兼容IE及所有浏览器)
* @param {any} tableid table父元素ID
* @param {any} filename 文件名称
*/
function HtmlExportToExcel(tableid, filename) {
if (getExplorer() === 'ie' || getExplorer() === undefined) {
HtmlExportToExcelForIE(tableid, filename);
}
else {
HtmlExportToExcelForEntire(tableid, filename);
}
} //IE浏览器导出Excel
function HtmlExportToExcelForIE(tableId, filename) {
try {
var oXL = new ActiveXObject("excel.Application");
//oXL.Visible = true;
//oXL.ScreenUpdating = false;
} catch (e1) {
try {
oXL = new ActiveXObject("et.Application");
} catch (e2) {
alert(e2.description + "\n\n\n要使用EXCEL对象，您必须安装Excel电子表格软件\n或者,需要安装Kingsoft ET软件\n\n同时浏览器须使用“ActiveX 控件”，您的浏览器须允许执行控件。");
return;
}
}
//创建AX对象excel
var oWB = oXL.Workbooks.Add();
//获取workbook对象
var xlsheet = oWB.Worksheets(); var elTable = document.getElementById(tableId); //替换掉表格td中隐藏的html元素
var tableHtml = ReplaceHtml(elTable.innerHTML); var newTable = document.getElementById("newData");
//console.log();
newTable.innerHTML = tableHtml; //激活当前sheet
var sel = document.body.createTextRange();
sel.moveToElementText(newTable);
//把表格中的内容移到TextRange中
sel.select;
//全选TextRange中内容
sel.execCommand("Copy");
//复制TextRange中内容
xlsheet.Paste();
//粘贴到活动的EXCEL中
oXL.Visible = true;
//设置excel可见属性 newTable.innerHTML = ""; try {
//设置 sheet 名称
xlsheet.Name = filename;
var fname = oXL.Application.GetSaveAsFilename(filename + ".xls", "Excel Spreadsheets (*.xls), *.xls");
} catch (e) {
print("Nested catch caught " + e);
} finally {
oWB.SaveAs(fname);
oWB.Close();
//xls.visible = false;
oXL.ScreenUpdating = true;
oXL.Quit();
}
} //非IE浏览器导出Excel
var HtmlExportToExcelForEntire = (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]-->' +
/**********这部分是加载表格的样式 没有样式可以省略 start**********/
'<style type="text/css">' +
'.tablefrom {width: 100%;border-collapse: collapse;}' +
'.tablefrom, .tablefrom td, .tablefrom th {text-align: center;font: 12px Arial, Helvetica, sans-serif;border: 1px solid #fff;}' +
'.tablefrom th{background:#328aa4;color:#fff;}' +
'.tablefrom td{background:#e5f1f4;}' +
'.tablefrom .BlueBgColor td {color: #fff;background-color: #0070c0;}' +
'.tablefrom .LightBlueBgColor td {color: #000000;background-color: #bdd7ee;}' +
'.tablefrom tr .BlueBgColorTd { color: #fff;background-color: #0070c0;}' +
'.tablefrom tr .LightBlueBgColorTd {color: #000000;background-color: #bdd7ee;}' +
'</style>'
/**********这部分是加载表格的样式 没有样式可以省略 end**********/
+ '</head><body>{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); }
//替换掉表格td中隐藏的html元素
var strHTML = ReplaceHtml(table.innerHTML);
var ctx = { worksheet: name || 'Worksheet', table: strHTML }; document.getElementById("dlink").href = uri + base64(format(template, ctx));
document.getElementById("dlink").download = name + ".xls";
document.getElementById("dlink").click();
};
})(); //获取当前使用浏览器
function getExplorer() {
var explorer = window.navigator.userAgent;
//ie
if (explorer.indexOf("MSIE") >= ) {
return 'ie';
}
//firefox
else if (explorer.indexOf("Firefox") >= ) {
return 'Firefox';
}
//Chrome
else if (explorer.indexOf("Chrome") >= ) {
return 'Chrome';
}
//Opera
else if (explorer.indexOf("Opera") >= ) {
return 'Opera';
}
//Safari
else if (explorer.indexOf("Safari") >= ) {
return 'Safari';
}
} //将隐藏的HTML元素替换掉
function ReplaceHtml(tableHtml) {
var radioValue = $('input[name="bedStatus"]:checked ').val();
if (radioValue === 'yuan') {
tableHtml = tableHtml.replace(/<span class="span_wanyuan" [^<>]*?>(.*?)<\/span>/gi, "");
}
else if (radioValue === 'wanyuan') {
tableHtml = tableHtml.replace(/<span class="span_yuan" [^<>]*?>(.*?)<\/span>/gi, "");
}
return tableHtml;
}
另外，我的功能需要替换掉td中隐藏的html元素，所以需要将新的table复制到另一个隐藏的div中。
页面html代码：
<div id="divData">
<table class="tablefrom" id="tbData" style="width: 100%; border-collapse: collapse;" border="" cellspacing="">
<tbody>
<tr>
<th rowspan="" colspan="" scope="col">序号</th>
<th style="min-width: 70px;" rowspan="" scope="col">项目</th>
<th style="min-width: 50px;" rowspan="" scope="col">维度</th>
<th style="min-width: 50px;" rowspan="" scope="col">本月资金</th>
<th rowspan="" colspan="" scope="col">某部门</th>
<th colspan="" scope="col">支付</th>
</tr>
<tr>
<th style="min-width: 50px;" scope="col">执行</th>
<th style="min-width: 50px;" scope="col">余额</th>
</tr>
<tr>
<td style="color: rgb(0, 0, 0); font-weight: bold; background-color: rgb(189, 215, 238);" rowspan="" scope="col">经营费用类</td>
<td style="min-width: 50px;" rowspan="" scope="col"></td>
<td rowspan="" scope="col">销售退款</td>
<td scope="col">实际</td>
<td style="color: rgb(0, 0, 0); background-color: rgb(189, 215, 238);" scope="col"><span class="span_yuan"></span><span class="span_wanyuan" style="display: none;"></span></td>
<td scope="col"><span class="span_yuan"></span><span class="span_wanyuan" style="display: none;"></span></td>
<td scope="col"><span class="span_yuan"></span><span class="span_wanyuan" style="display: none;"></span></td>
<td scope="col"><span class="span_yuan"></span><span class="span_wanyuan" style="display: none;"></span></td>
</tr>
<tr>
<td scope="col">计划</td>
<td style="color: rgb(0, 0, 0); background-color: rgb(189, 215, 238);" scope="col"><span class="span_yuan"></span><span class="span_wanyuan" style="display: none;"></span></td>
<td scope="col"><span class="span_yuan"></span><span class="span_wanyuan" style="display: none;"></span></td>
<td scope="col">-</td>
<td scope="col">-</td>
</tr>
<tr>
<td scope="col">差额</td>
<td style="color: rgb(0, 0, 0); background-color: rgb(189, 215, 238);" scope="col"><span class="span_yuan"></span><span class="span_wanyuan" style="display: none;"></span></td>
<td scope="col"><span class="span_yuan"></span><span class="span_wanyuan" style="display: none;"></span></td>
<td scope="col">-</td>
<td scope="col">-</td>
</tr>
</tbody>
</table>
</div>
<div id="newData" style="display: none;"></div>
HTML导出Excel文件(兼容IE及所有浏览器)的更多相关文章
- 如何使用JavaScript实现前端导入和导出excel文件
一.SpreadJS 简介 SpreadJS 是一款基于 HTML5 的纯 JavaScript 电子表格和网格功能控件,以“高速低耗.纯前端.零依赖”为产品特色,可嵌入任何操作系统,同时满足 .NE ...
- ExtJS Grid导出excel文件
ExtJS Grid导出excel文件, 需下载POI:链接:http://pan.baidu.com/s/1i3lkPhF 密码:rqbg 1.将Grid表格数据连同表格列名传到后台 2.后台导出e ...
- PHP从数据库导出EXCEL文件
参考博客链接:http://www.cnblogs.com/huangcong/p/3687665.html 我的程序代码 原生导出Excel文件 <?phpheader('Content-ty ...
- jxl导出Excel文件
一.java项目实现读取Excel文件和导出Excel文件 实现读取和导出Excel文件的代码: package servlet; import java.io.FileInputStream; im ...
- PHP导出excel文件
现在教教你如何导入excel文件: 在我的文件储存里面有一个com文件夹的,将其解压放在ThinkPHP/Library/文件夹里面,然后就是写控制器啦!去调用这个插件: <?php names ...
- 【转】 (C#)利用Aspose.Cells组件导入导出excel文件
Aspose.Cells组件可以不依赖excel来导入导出excel文件: 导入: public static System.Data.DataTable ReadExcel(String strFi ...
- PHPExcel导出excel文件
今天园子刚开,先来个货顶下,后续园丁qing我会再慢慢种园子的,希望大家多来园子逛逛. PHPExcel导出excel文件,先说下重要的参数要记住的东西 impUser() 导入方法 exportEx ...
- 导出Excel文件
/// <summary> /// 类说明:Assistant /// 更新网站:[url=http://www.sufeinet.com/thread-655-1-1.html]http ...
- 关于asp.net C# 导出Excel文件 打开Excel文件格式与扩展名指定格式不一致的解决办法
-----转载:http://blog.csdn.net/sgear/article/details/7663502 关于asp.net C# 导出Excel文件 打开Excel文件格式与扩展名指定格 ...
随机推荐
- Cesium学习网址
不错的案例介绍: 根据地形瓦片直接绘制高程.坡度及等高线 同一场景下显示两个不同的瓦片图层 https://cloud.tencent.com/developer/article/1113355 绘制 ...
- mybatis入门篇：mybatis动态SQL
1.if用法 <select id="selectUser" resultType="com.forest.owl.entity.User"> se ...
- 215.Spring Boot+Spring Security：初体验
[视频&交流平台] SpringBoot视频:http://t.cn/R3QepWG Spring Cloud视频:http://t.cn/R3QeRZc SpringBoot Shiro视频 ...
- Gradle史上最详细解析
转自:https://www.cnblogs.com/wxishang1991/p/5532006.html 郑重申明本文转自邓凡平老师的 http://www.infoq.com/cn/articl ...
- eShopOnContainers 看微服务④：Catalog Service
服务简介 Catalog service(目录服务)维护着所有产品信息,包括库存.价格.所以该微服务的核心业务为: 产品信息的维护 库存的更新 价格的维护 架构模式 先看代码结构(下图). 主要依赖: ...
- C++_数字时钟软件实现设计
利用C++学习内容,通过windows自带函数实现一个简易的时钟 #include<iostream> #include<windows.h> //延时与清屏头文件 using ...
- 【转】【JAVA资料免费下载】158个JAVA免豆精品资料汇总——下载目录
附件完整版下载地址: http://down.51cto.com/data/431561 附件部分预览~ java中国移动收费系统[源代码] http://down.51cto.com/data/70 ...
- part1
一.hello world 明确的指出 hello.py 脚本由 python 解释器来执行.coding:utf-8处理脚本中的中文 #!/usr/bin/env python # _*_ codi ...
- 重写 final关键字 多态调用子类特有的属性及行为(向上向下转型)
1.override 重写:在继承中,子类与父类方法名相同,参数列表相同,的方法叫重写,与返回值有关; 主要应用于系统升级. 2.final 关键字: 可修饰:1.类-->被修饰后该类不能被继 ...
- Java学习之代码块(静态,构造代码块,构造方法)执行顺序
静态代码块 static{ 代码 } 随着类的加载而加载,随类的消失而消失,存在于类中,方法外,最先执行,且只加载1次,可用来加载驱动及初始化对象属性. 构造代码块 { } 也存在于类中, ...