支持IE,FireFox,Chrome三大主流浏览器,通过js+Flash方式将table导出Excel文件
今天在做项目的时候,遇到了前端下载Excel的功能,结果原先的代码,如下:
function generate_excel(tableid) {
var table = document.getElementById(tableid);
var html = table.outerHTML;
window.open('data:application/vnd.ms-excel;base64,' + base64_encode(html));
}
此种写法,只能支持FF,chrome,在IE下无法支持。在网上搜索了一下,也无法找到比较好的jquery插件,能够同时跨三种平台,通过jquery方式将html的table导出Excel。
后来机缘巧合之下,发现一个Flash,能够同时支持各种浏览器。对于并不排斥使用的flash的网站来说,也许是一个解决方案。
不过,目前使用下来,该方法有两个缺点
1.firefox中需要允许该flash运行
2.IE中导出,excel行高稍许有些问题
下面是使用方法
flash的下载地址:https://github.com/dcneiner/Downloadify
示例代码:
html中
<p id="downloadify">
<object id="downloadify_obj" width="100" height="30" type="application/x-shockwave-flash" name="downloadify_obj" data="../../Scripts/TableExport/downloadify.swf">
<param name="allowScriptAccess" value="always">
<param name="wmode" value="transparent">
<param name="flashvars" value="queue_name=downloadify&width=100&height=30&downloadImage=images/download.png">
</object>
</p>
其中,data="../../Scripts/TableExport/downloadify.swf",downloadImage=images/download.png" 需要改成自己的相应路径
js中
<script type="text/javascript">// <![CDATA[
Downloadify.create('downloadify', {
filename: function () {
return "Data.xls";
},
data: function () {
var table = document.getElementById('Table');
var html = table.outerHTML;
return html;
},
onComplete: function () {
alert('Your File Has Been Saved!');
},
onCancel: function () {
alert('You have cancelled the saving of this file.');
},
onError: function () {
alert('You must put something in the File Contents or there will be nothing to save!');
},
transparent: false,
swf: '../../Scripts/TableExport/downloadify.swf',
downloadImage: '../../Scripts/TableExport/download.png',
width: 100,
height: 30,
transparent: true,
append: false
});
// ]]></script>
其中,
filename的名字自己修改,
data中,写自己table的名称
swf: '../../Scripts/TableExport/downloadify.swf',
downloadImage: '../../Scripts/TableExport/download.png',
写自己对应的路径。其他的可以自己网上查询api
支持IE,FireFox,Chrome三大主流浏览器,通过js+Flash方式将table导出Excel文件的更多相关文章
- 关闭浏览器输入框自动补齐 兼容IE,FF,Chrome等主流浏览器
这篇文章主要介绍了关闭浏览器输入框自动补齐 兼容IE,FF,Chrome等主流浏览器,需要的朋友可以参考下.希望对大家有所帮助 Firefox 和 IE 的浏览器各自实现了input历史记录的功能 ...
- HTML导出Excel文件(兼容IE及所有浏览器)
注意:IE浏览器需要以下设置: 打开IE,在常用工具栏中选择“工具”--->Internet选项---->选择"安全"标签页--->选择"自定义级别&q ...
- Java web中不同浏览器间导出Excel文件名称乱码问题解决方案
问题描述: 对于不同浏览器存在对中文编码格式问题,从而在导出Excel文件时,中文文件名出现乱码的情况,即在程序中给要导出的文件指定一个中文名字时,在浏览器上出现的下载框中的文件名出现了乱码,解决如下 ...
- 主流浏览器Css&js hack写法
参考: BROWSER HACKS 主流浏览器的Hack写法
- 支持 Firefox、Chrome 等主流浏览器的全站变灰 CSS 代码
<style> html{ -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grays ...
- javascript 实现禁止右键,复制,选取文本 (兼容firefox,IE,chrome等主流浏览器)
1. JS 禁止右键 <script type="text/javascript">document.oncontextmenu=function(e){return ...
- 基于js的自适应、多样式轮播图插件(兼容IE8+、FF、chrome等主流浏览器)
插件github地址:https://github.com/pomelott/slider-plug_in 使用方式: slider plug-in 左右滑动的自适应.多样式全能插件.多次调用时只需传 ...
- 关于 IE firefox Chrome下的通过用js 关闭窗口的一些问题
首先IE是可以通过window.close()来关闭浏览器窗口的,但是在firefox和Chrome下是无效的,原因在于: ~~~ie可直接<button onclick="windo ...
- chrome和搜狗浏览器的js问题
1.在chrome中如果是js添加颜色必须用"#00CC00",必须加#号...不然会出问题,但是在搜狗浏览器中可以没有#号也能正确识别...
随机推荐
- SRM 599 DIV 2
rating又掉了...变灰色了%>_<%.250pt很简单,一眼看上去是个背包,没有多想立马写了个01背包,后面发现其实就是个简单的排序...因为只是需要求数量而已.500pt被我写残了 ...
- Mongodb集群部署ReplicaSet+Sharding -摘自网络
网上关于三种集群方式的搭建方式很多,都是分开来介绍的.Replica Set (复制集成)主要是做主从库的,但是没法实现负载均衡的效果,真正实现这个的,是Sharding(分片集群),通过数据分布在每 ...
- 家庭局域网接入Internet
接入Internet 建立宽带连接 步骤一:单击"网络",再属性 步骤二:单击"更改适配器设置" 步骤三:选择"宽带连接" 步骤四:输入 ...
- 字符流缓冲区的使用之BufferedWriter和BufferedReader
从字符输入流中读取文本,缓冲各个字符,从而实现字符.数组和行的高效读取,代码中使用了输入缓冲区的特有的方法:readLine(),获取一行文本数据 import java.io.BufferedRea ...
- delphi 完全控制Excel 文件
( 一 ) 使用动态创建的方法 uses ComObj; 首先创建 Excel 对象Var ExcelApp : Variant ; ExcelApp := CreateOleObject ( ...
- whu 1464 deal with numbers
WHU 1464 deal with numbers 题意: 给你一串数字,对着串数字有三项操作: Minus a,b,c:对区间[a,b]总的每个数都减c. Division a,b,c:对区间[ ...
- iOS动画详解(二)
UIImage常用的绘图操作 一个UIImage对象提供了向当前上下文绘制自身的方法.我们现在已经知道如何获取一个图片类型的上下文并将它转变成当前上下文. 平移操作:下面的代码展示了如何将UI ...
- Android设计模式系列-组合模式
Android中对组合模式的应用,可谓是泛滥成粥,随处可见,那就是View和ViewGroup类的使用.在android UI设计,几乎所有的widget和布局类都依靠这两个类.组合模式,Compos ...
- Genymotion中文手册
目录1.概述 22.特点 22.1最擅长于虚拟Android 22.2高可控性 22.3管理你的设备 22.4从Eclipse中开启虚拟设备 33.要求 33.1操作系统要求 33.2系统硬件要求 3 ...
- Aizu 2304 Reverse Roads 费用流
Reverse Roads Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://acm.hust.edu.cn/vjudge/contest/view ...