运用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. 深入理解jQuery、Angular、node中的Promise

    最初遇到Promise是在jQuery中,在jQuery1.5版本中引入了Deferred Object,这个异步队列模块用于实现异步任务和回调函数的解耦.为ajax模块.队列模块.ready事件提供 ...

  2. 序列化笔记之一：Google的Protocol Buffer格式分析

    从公开介绍来看,ProtocolBuffer(PB)是google 的一种数据交换的格式,它独立于语言,独立于平台.作为一个学了多年通信的人,ProtocolBuffer在我看来是一种信源编码.所谓信 ...

  3. ASP.NET Web API Model-ActionBinding

    ASP.NET Web API Model-ActionBinding 前言 前面的几个篇幅把Model部分的知识点划分成一个个的模块来讲解,而在控制器执行过程中分为好多个过程,对于控制器执行过程(一 ...

  4. C#委托使用详解（Delegates）

    摘要 委托是C#编程一个非常重要的概念,也是一个难点.本文将系统详细讲解委托. 1. 委托是什么? 其实,我一直思考如何讲解委托,才能把委托说得更透彻.说实话,每个人都委托都有不同的见解,因为看问题的 ...

  5. CSS 实现打字效果

    JS实现 最近做项目的时候需要实现一个字符逐个出现的打字效果,在网上一搜有个不错的jQuery插件Typed.js,效果很赞 <div class="element"> ...

  6. C++ std::map

    std::map template < class Key, // map::key_type class T, // map::mapped_type class Compare = less ...

  7. .NET 基础一步步一幕幕[out、ref、params]

    out.ref.params out: 如果你在一个方法中,返回多个相同类型的值的时候,可以考虑返回一个数组. 但是,如果返回多个不同类型的值的时候,返回数组就不行了,那么这个时候, 我们可以考虑使用 ...

  8. 推荐13款javascript模板引擎

    javaScript 在生成各种页面内容时如果能结合一些模板技术,可以让逻辑和数据之间更加清晰,本文介绍 X 款 JavaScript 的模板引擎.(排名不分先后顺序) 1. Mustache 基于j ...

  9. 纯WebApi，不包含MVC Demo

    1.创建项目 只是单纯的使用Web API的功能,而不需要使用的MVC,这个时候就该抛开MVC来新建项目了. 首先,新建一个Asp.Net空应用程序,在程序集中添加引用System.Web.Http和 ...

  10. 6.JAVA之GUI编程Action事件

    功能:单击一个按钮实现关闭窗口: import java.awt.*; import java.awt.event.*; public class StudyAction { // 定义该图形所需的组 ...