js 前端 table 导出 excel

浏览数：26 / 时间：2015年06月09日

　　园子，github，stackoverflow 关于前端下载的文章不少

　　园子里大部分都是利用ActiveXObject对象来实现，可他有个缺点安全等级，还有必须安装excel……

　　github,stackoverflow 有点高大上了，几乎全是英文……无奈只能看看代码了，还好找到了一个比较好的方法

　　直接上代码：还是看原文好

　　　　https://github.com/rainabba/jquery-table2excel

　　　　http://stackoverflow.com/questions/17126453/html-table-to-excel-javascript

　　当然一个需要引入jquery库，可也以自己去修改……

　　html table内容

 <table id="table2excel">
        <thead>
            <tr class="noExl">
                <td>
                    This shouldn‘t get exported
                </td>
                <td>
                    This shouldn‘t get exported either
                </td>
            </tr>
            <tr>
                <td>
                    This Should get exported as a header
                </td>
                <td>
                    This should too
                </td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    data1a
                </td>
                <td>
                    data1b
                </td>
            </tr>
            <tr>
                <td>
                    data2a
                </td>
                <td>
                    data2b
                </td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="2">
                    This footer spans 2 cells
                </td>
            </tr>
        </tfoot>
    </table>

<button onclick="xiazai();">hello</button>

 <script src="../backbone/js/jquery.js" type="text/javascript"></script>
 <script src="tabletoexcle.js" type="text/javascript"></script>

 function xiazai() {
            $("#table2excel").table2excel({
                exclude: ".noExl",
                name: "Excel Document Name"
            });
        }

这是方法一要引入的 tabletoexcle.js 源码

/* 
*  jQuery table2excel - v1.0.1 
*  jQuery plugin to export an .xls file in browser from an HTML table 
*  https://github.com/rainabba/jquery-table2excel 
* 
*  Made by rainabba 
*  Under MIT License 
*/
//table2excel.js 
; (function ($, window, document, undefined) {
    var pluginName = "table2excel",
                 defaults = {
                     exclude: ".noExl",
                     name: "Table2Excel"
                 };


    // The actual plugin constructor 
    function Plugin(element, options) {
        this.element = element;
        // jQuery has an extend method which merges the contents of two or 
        // more objects, storing the result in the first object. The first object 
        // is generally empty as we don‘t want to alter the default options for 
        // future instances of the plugin 
        this.settings = $.extend({}, defaults, options);
        this._defaults = defaults;
        this._name = pluginName;
        this.init();
    }

    Plugin.prototype = {
        init: function () {
            var e = this;
            e.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>";
            e.template += "<x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions>";
            e.template += "<x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>";
            e.tableRows = "";
            // get contents of table except for exclude 
            $(e.element).find("tr").not(this.settings.exclude).each(function (i, o) {
                e.tableRows += "<tr>" + $(o).html() + "</tr>";
            });
            this.tableToExcel(this.tableRows, this.settings.name);
        },
        tableToExcel: function (table, name) {
            var e = this;
            e.uri = "data:application/vnd.ms-excel;base64,";
            e.base64 = function (s) {
                return window.btoa(unescape(encodeURIComponent(s)));
            };
            e.format = function (s, c) {
                return s.replace(/{(\w+)}/g, function (m, p) {
                    return c[p];
                });
            };
            e.ctx = {
                worksheet: name || "Worksheet",
                table: table
            };
           
            window.location.href = e.uri + e.base64(e.format(e.template, e.ctx));
        }
    };


    $.fn[pluginName] = function (options) {
        this.each(function () {
            if (!$.data(this, "plugin_" + pluginName)) {
                $.data(this, "plugin_" + pluginName, new Plugin(this, options));
            }
        });
        // chain jQuery functions 
        return this;
    };
})(jQuery, window, document);

方法一有个缺点就是不知道怎么去命名文件

方法二呢可以明明文件喽

 <!--   方法2-->
    <button onclick="tableToExcel(‘table2excel‘, ‘hello‘, ‘myfile.xls‘);"> dlink</button>
    <a id="dlink" style="display: none;"></a>

  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))) 
            },
            format = function (s, c) {
                return s.replace(/{(\w+)}/g, function (m, p) { return c[p]; }) 
            }
            return function (table, name, filename) {
                if (!table.nodeType) 
                    table = document.getElementById(table)
                var ctx = { worksheet: name || ‘Worksheet‘, table: table.innerHTML }

                document.getElementById("dlink").href = uri + base64(format(template, ctx));
                document.getElementById("dlink").download = filename;
                document.getElementById("dlink").click();

            }
        })()