运用js实现将页面中的table导出为excel文件，页面显示如下：

　　

导出的excel文件显示如下：

　　

实现代码：

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <style type="text/css">

        table{border-collapse: collapse; }

        th, td{border: 1px solid #4d4d4d;padding: 5px; }

    </style>

    <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) {//整个表格拷贝到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('ta')

            }

        }

        function Cleanup() {

            window.clearInterval(idTmr);

            CollectGarbage();

        }

        /*

            template ： 定义文档的类型，相当于html页面中顶部的<!DOCTYPE> 声明。（个人理解，不确定）

            encodeURIComponent:解码

            unescape() 函数：对通过 escape() 编码的字符串进行解码。

            window.btoa(window.encodeURIComponent(str)):支持汉字进行解码。

            \w ：匹配包括下划线的任何单词字符。等价于’[A-Za-z0-9_]’

            replace()方法：用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。

            {(\w+)}：匹配所有 {1个或更多字符} 形式的字符串；此处匹配输出内容是 “worksheet”

            正则中的() ：是为了提取匹配的字符串。表达式中有几个()就有几个相应的匹配字符串。

            讲解(/{(\w+)}/g, function(m, p) { return c[p]; } ：

                /{(\w+)}/g 匹配出所有形式为“{worksheet}”的字符串；

                function参数：  m  正则所匹配到的内容，即“worksheet”；

                                p  正则表达式中分组的内容,即“(\w+)”分组中匹配到的内容，为“worksheet”；

                c ：为object，见下图3

                c[p] : 为“worksheet”

        */

        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><!--[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)))

            },

            // 下面这段函数作用是：将template中的变量替换为页面内容ctx获取到的值

            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)

                }

                // 获取表单的名字和表单查询的内容

                var ctx = {worksheet: name || 'Worksheet', table: table.innerHTML};

                // format()函数：通过格式操作使任意类型的数据转换成一个字符串

                // base64()：进行编码

                window.location.href = uri + base64(format(template, ctx))

            }

        })()

    </script>

</head>

<body>

    <table id="ta">

        <tr>

            <th></th>

            <th>一</th>

            <th>二</th>

            <th>三</th>

            <th>四</th>

        </tr>

        <tr>

            <td>万籁寂无声</td>

            <td>衾铁棱棱近五更</td>

            <td>香断灯昏吟未稳</td>

            <td>凄清</td>

            <td>只有霜华伴月明</td>

        </tr>

        <tr>

            <td>应是夜寒凝</td>

            <td>恼得梅花睡不成</td>

            <td>我念梅花花念我</td>

            <td>关情</td>

            <td>起看清冰满玉瓶</td>

        </tr>

    </table>

    <br/>

    <input type="button" value="导出EXCEL" onclick="method1('ta')" />

</body>

</html>

图3：

　　代码事例中运用到的知识都在注释中说明，方便以后查看，尤其是正则 replace 各个参数的意义，是属于比较细的知识点。个人见解欢迎指正。

　　关于replace的用法详解请参考另一篇博文：http://www.cnblogs.com/zhangym118/p/6235998.html

JS导出excel 兼容ie、chrome、firefox的更多相关文章

  1. js导出execl兼容ie Chrome Firefox各种主流浏览器(js export execl)

    第一种导出table布局的表格 <html> <head> <meta charset="utf-8"> <script type=&qu ...

  2. js导出execl 兼容ie Chrome Firefox各种主流浏览器(js export execl)

    第一种导出table布局的表格 1 <html> 2 3 <head> 4 <meta charset="utf-8"> 5 <scrip ...

  3. 使用JavaScript / JQuery导出 html table 数据至 Excel 兼容IE/Chrome/Firefox

    function fnExcelReport() { var tab_text="<table border='2px'><tr bgcolor='#87AFC6'> ...

  4. JAVA 导出 Excel， JS 导出 Excel

    本介绍两种Excle导出方法: JAVA 导出 Excle, JS 导出 Excle 1, js 根据 html 页面的 table > tr > td 标签导出 js代码: //导出 v ...

  5. JS导出excel设置下载的标题/与angular结合冲突

    2017.8更新 此功能与angular结合使用时,最后一行 document.getElementById("dlink").click(); 与angular的ng-click ...

  6. js导出excel

    function inportEx() { $("#btnEx").text("导出中..."); var fugNumber = "";/ ...

  7. js导出Excel表格

    js导出Excel表格 直接上代码: 红色部分:如果表格数据中有“1/1”这样的值,会在导出的Excel中转化为日期“1月1日”,所以才加上了红色那两句.如果返回值中没有这样的格式,红色部分可以不写. ...

  8. EasyUI 如何结合JS导出Excel文件

    出处:http://blog.csdn.net/jumtre/article/details/41119991 EasyUI 如何结合JS导出Excel文件 分类: 技术 Javascript jQu ...

  9. [转]tableExport.js 导出excel 如果有负数或是空值 导出前面会自动加上单引号

    原文地址:https://blog.csdn.net/private66/article/details/88718285 tableExport.js  导出excel  如果有负数或是空值 导出前 ...

随机推荐

  1. Promise的前世今生和妙用技巧

    浏览器事件模型和回调机制 JavaScript作为单线程运行于浏览器之中,这是每本JavaScript教科书中都会被提到的.同时出于对UI线程操作的安全性考虑,JavaScript和UI线程也处于同一 ...

  2. 锤子OneStep及BigBang使用体验

    令人期待的Smartisan OS v3.1.2终于推送了,第一时间下载了更新.几乎花了半个小时才升级完毕,捧着还热乎的手机,赶忙体验一下传说中的两大杀器:OneStep以及BigBang. 先说On ...

  3. Entity Framework 6 Recipes 2nd Edition（9-5）译->删除一个断开的实体

    9-5. 删除一个断开的实体 问题 我们要把一个把WCF上取回的对象做上删除的标志. 解决方案 假设我们有如Figure 9-5所示实体的支付与票据的模型. Figure 9-5. 一个支付与票据的模 ...

  4. 【.NET深呼吸】如何反序列化动态JSON

    .net本身除了支持SOAP.XML.二进制等序列化和反序列化,后来也加入了对JSON的序列化的支持.然而,在实际开发中,常常会遇到结构不确定的JSON对象,这些对象可能是其他代码动态生成的,你事先无 ...

  5. Android注解使用之使用Support Annotations注解优化代码

    前言: 前面学习总结了Java注解的使用,博客地址详见Java学习之注解Annotation实现原理,从本质上了解到什么注解,以及注解怎么使用?不要看见使用注解就想到反射会影响性能之类,今天我们就来学 ...

  6. 设计模式(十)：从电影院中认识"迭代器模式"(Iterator Pattern)

    上篇博客我们从醋溜土豆丝与清炒苦瓜中认识了“模板方法模式”,那么在今天这篇博客中我们要从电影院中来认识"迭代器模式"(Iterator Pattern).“迭代器模式”顾名思义就是 ...

  7. Ubuntu 安装 CLI 并运行 ASP.NET Core 1.0

    Ubuntu 下载地址:http://www.ubuntu.org.cn/download/desktop 注:目前 CLI 的安装命令只支持 Ubuntu 14.04,暂不支持 Ubuntu 14. ...

  8. 使用UICollectionView实现首页的滚动效果

    实现类似这样的效果,可以滚动大概有两种实现方案 1. 使用scrollview来实现 2. 使用UICollectionView来实现 第一种比较简单,而且相对于性能来说不太好,于是我们使用第二种方案 ...

  9. php后台增删改跳转

    php登录页面: <h1>登录界面</h1> <form action="dengluchuli.php" method="post&quo ...

  10. Python基础（三）

    本章内容: 深浅拷贝 函数(全局与局部变量) 内置函数 文件处理 三元运算 lambda 表达式 递归(斐波那契数列) 冒泡排序 深浅拷贝 一.数字和字符串 对于 数字 和 字符串 而言,赋值.浅拷贝 ...