运用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. Chrome代码下载及编译

    2-3年前在做客户端开发时,看过CHROME的一部分代码,主要是BASE库相关的.其项目之大,编译时间之长给我留下了深刻的印象. 3年后的最近,想着再读一下其他部分的代码,所以就对其纠结的下载和编译过 ...

  2. 站在风口，你或许就是那年薪20w+的程序猿

    最近面试了一些人,也在群上跟一些群友聊起,发现现在的互联网真是热,一些工作才两三年的期望的薪资都是十几K的起,这真是让我们这些早几年就成为程序猿的情何以堪!正所谓是站在风口上,猪也能飞起来!我在这里就 ...

  3. Node.js实现RESTful api,express or koa?

    文章导读: 一.what's RESTful API 二.Express RESTful API 三.KOA RESTful API 四.express还是koa? 五.参考资料 一.what's R ...

  4. Atitit 硬件 软件 的开源工作 差异对比

    Atitit 硬件 软件 的开源工作 差异对比 1.1. 模块化,标准化,以及修改的便捷性1 1.2. 生产和发布成本 1 1.3.   3. 入行门槛搞2 1.4.  在软件业极度发达的今天,任何具 ...

  5. LATEX数学公式基本语法

    TEX 是Donald E. Knuth 编写的一个以排版文章及数学公式为目标的计算机程序.TEX的版本号不断趋近于π,现在为3.141592.由Pascal 语言写成,特点: 免费.输出质量高.擅长 ...

  6. 计算机程序的思维逻辑 (41) - 剖析HashSet

    上节介绍了HashMap,提到了Set接口,Map接口的两个方法keySet和entrySet返回的都是Set,本节,我们来看Set接口的一个重要实现类HashSet. 与HashMap类似,字面上看 ...

  7. JS过滤emoji

    function filterEmoji(text){ var ranges = [ '\ud83c[\udf00-\udfff]', '\ud83d[\udc00-\ude4f]', '\ud83d ...

  8. 设置MYSQL允许用IP访问

    mysql>use mysql; mysql>update user set host = '%'  where user ='root'; mysql>flush privileg ...

  9. 学习Spring——两个你熟悉的不能再熟悉的场景使用

    最近公众号受邀获取了留言和赠送模板的权限,小开心(欢迎去公众号JackieZheng围观). 我们大致的了解了Spring这个框架对于依赖注入的使用和诠释可谓是淋漓尽致.因为有了Spring的这个IO ...

  10. 用CIL写程序:从“call vs callvirt”看方法调用

    前文回顾:<用CIL写程序系列> 前言: 最近的时间都奉献给了加班,距离上一篇文章也有半个多月了.不过在上一篇文章<用CIL写程序:定义一个叫“慕容小匹夫”的类>中,匹夫和各位 ...