今天在做项目的时候,遇到了前端下载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文件的更多相关文章

  1. 关闭浏览器输入框自动补齐 兼容IE,FF,Chrome等主流浏览器

    这篇文章主要介绍了关闭浏览器输入框自动补齐 兼容IE,FF,Chrome等主流浏览器,需要的朋友可以参考下.希望对大家有所帮助   Firefox 和 IE 的浏览器各自实现了input历史记录的功能 ...

  2. HTML导出Excel文件(兼容IE及所有浏览器)

    注意:IE浏览器需要以下设置: 打开IE,在常用工具栏中选择“工具”--->Internet选项---->选择"安全"标签页--->选择"自定义级别&q ...

  3. Java web中不同浏览器间导出Excel文件名称乱码问题解决方案

    问题描述: 对于不同浏览器存在对中文编码格式问题,从而在导出Excel文件时,中文文件名出现乱码的情况,即在程序中给要导出的文件指定一个中文名字时,在浏览器上出现的下载框中的文件名出现了乱码,解决如下 ...

  4. 主流浏览器Css&js hack写法

    参考: BROWSER HACKS 主流浏览器的Hack写法

  5. 支持 Firefox、Chrome 等主流浏览器的全站变灰 CSS 代码

    <style> html{ -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grays ...

  6. javascript 实现禁止右键,复制,选取文本 (兼容firefox,IE,chrome等主流浏览器)

    1. JS 禁止右键 <script type="text/javascript">document.oncontextmenu=function(e){return ...

  7. 基于js的自适应、多样式轮播图插件(兼容IE8+、FF、chrome等主流浏览器)

    插件github地址:https://github.com/pomelott/slider-plug_in 使用方式: slider plug-in 左右滑动的自适应.多样式全能插件.多次调用时只需传 ...

  8. 关于 IE firefox Chrome下的通过用js 关闭窗口的一些问题

    首先IE是可以通过window.close()来关闭浏览器窗口的,但是在firefox和Chrome下是无效的,原因在于: ~~~ie可直接<button onclick="windo ...

  9. chrome和搜狗浏览器的js问题

    1.在chrome中如果是js添加颜色必须用"#00CC00",必须加#号...不然会出问题,但是在搜狗浏览器中可以没有#号也能正确识别...

随机推荐

  1. dmesg 信息实时监控其改变

    方法一: 最新的dmesg版本有一个 -w (-w, --follow) 选项,可以实时监控并输出: $ dmesg -wH 方法二: watch -n 0.1 "dmesg | tail ...

  2. [Tutorial] Using the RasPi as a WiFi hostspot

    http://www.raspberrypi.org/forums/viewtopic.php?f=36&t=19120 http://wireless.kernel.org/en/users ...

  3. hdoj 1106 排序

    排序 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submissi ...

  4. PTA 5-15 PAT Judge (25分)

    /* * 1.主要就用了个sort对结构体的三级排序 */ #include "iostream" #include "algorithm" using nam ...

  5. android视频播放心得体会

    android视频播放主要是两种方式1.系统封装好的videoplayer,有前进.后退.暂停/播放.拉动最基本的功能,够一般使用,操作办法也很简单,如果需要自定义程度高就需要用到第二种方法:Surf ...

  6. 剑指OFFER之数组中出现次数超过一半的数字(九度OJ1370)

    题目描述: 数组中有一个数字出现的次数超过数组长度的一半,请找出这个数字.例如输入一个长度为9的数组{1,2,3,2,2,2,5,4,2}.由于数字2在数组中出现了5次,超过数组长度的一半,因此输出2 ...

  7. Gitbook 使用入门

    GitBook 是一个基于 Node.js 的命令行工具,可使用 Github/Git 和 Markdown 来制作精美的电子书. 本书将简单介绍如何安装.编写.生成.发布一本在线图书. http:/ ...

  8. 如何用 iptables 禁止某个ip?

    国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私 ...

  9. Mac下移动硬盘不能粘贴

    不想格式化,安装 Paragon NTFS 10.0.2 from:http://www.nowmac.com/support/mac/664.html 就可以解决

  10. istringstream

    编写程序,将来自一个文件中的行保存在一个vector<string>中,然后使用一个istringstream从vector读取数据成员,每次读取一个单词 #include <ios ...