支持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

时间: 2024-07-31 22:13:45

支持IE,FireFox,Chrome三大主流浏览器,通过js+Flash方式将table导出Excel文件的相关文章

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

注意:IE浏览器需要以下设置: 打开IE,在常用工具栏中选择"工具"--->Internet选项---->选择"安全"标签页--->选择"自定义级别"--->弹出的窗口中找到ActiveX控件和插件--->将"ActiveX控件自动提示""对没有标记安全的ActiveX控件进行初始化和脚本运行""下载未签名的ActiveX控件"三项 选择启用 即可! Htm

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

这篇文章主要介绍了关闭浏览器输入框自动补齐 兼容IE,FF,Chrome等主流浏览器,需要的朋友可以参考下.希望对大家有所帮助 Firefox 和 IE 的浏览器各自实现了input历史记录的功能,可以简化输入时的麻烦,但是,有时候弹出的下拉框会挡住页面显示内容,而且在某些情况下也不需要对input框进行记录,如号码查询的input框,用户不会对同一个号码进行多次查询,就没有必要让浏览器记录. MSIE自定义了input 的扩展属性 autocomplete,置为off即可 <input typ

兼容ie5-ie11及其他主流浏览器的js document.getElementsByClassName 方法

var getElementsByClassName = function(searchClass,node,tag) { if(document.getElementsByClassName){ return document.getElementsByClassName(searchClass) }else{ node = node || document; tag = tag || '*'; var returnElements = [] var els = (tag === "*&quo

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

问题描述: 对于不同浏览器存在对中文编码格式问题,从而在导出Excel文件时,中文文件名出现乱码的情况,即在程序中给要导出的文件指定一个中文名字时,在浏览器上出现的下载框中的文件名出现了乱码,解决如下: 解决方案: [java] view plain copy Date dt=new Date();//如果不需要格式,可直接用dt,dt就是当前系统时间 DateFormat df = new SimpleDateFormat("yyyy/MM/dd HH:mm:ss");//设置显示格

MVC浏览器导出Excel文件(NPOI)

一.首先引用NPOI的.dll .dll下载地址:链接:https://pan.baidu.com/s/1K4cCb4qpkIfDoH1fZnNvVQ 密码:i9sl 里面有一个ExcelHelper帮助类,复制到项目中,给该帮助类中的方法传参即可完成导出 二.在View中:按钮直接跳转到该哪个控制器中的方法(注意该方法的返回值类型为FileResult) 三.在控制器方法中代码如下: public FileResult DropFile() { string sheetName = "工作簿1

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

1. JS 禁止右键 <script type="text/javascript">document.oncontextmenu=function(e){return false;}</script> <body onselectstart="return false"> ...... 2. CSS 禁止复制和选取 如果让整个页面都禁止选择 <style type="text/css"> body

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

插件github地址:https://github.com/pomelott/slider-plug_in 使用方式: slider plug-in 左右滑动的自适应.多样式全能插件.多次调用时只需传入最外层盒子ID即可. 1.根据html中的Dom结构引入图片. 2.引入css和js文件 3.调用pomeloSlider.doslide(obj) sliderwidth:轮播图宽度,单位为像素,默认自适应全屏. outer:最外层盒子ID,默认为"outer" time:轮播的时间间

Firefox - 永久解决火狐浏览器出现的flash版本更新问题

[LJ?Dragon]鱼对水说你看不到我的眼泪,因为我在水里.水说我能感觉到你的眼泪,因为你在我心里.[LJ?Dragon]You're more than a shadow, I've just to believe. [LJ?Dragon]A true friend is some one who reaches for your hand and touches your heart. 在浏览器的地址栏中输入   about:config  ,回车. 在搜索的空白栏中输入   extens

FileSaver.js 浏览器导出Excel文件

限制一:不同浏览器对 blob 对象有不同的限制 具体看看下面这个表格(出自 FileSaver.js): Browser Constructs as Filenames Max Blob Size Dependencies Firefox 20+ Blob Yes 800 MiB None Firefox < 20 data: URI No n/a Blob.js Chrome Blob Yes 500 MiB None Chrome for Android Blob Yes 500 MiB