zoukankan      html  css  js  c++  java
  • js 前端 table 导出 excel

      园子,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>

    <!-- 方法1-->
    <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();
    
                }
            })()
  • 相关阅读:
    nodejs install
    taobao sass
    Cors 跨域访问API
    多文件上传
    Next
    实用小工具
    下载包含src,tgz,zip的文件
    HTML5文件API
    Bootstrap (导航、标签、面包屑导航)
    Bootstrap 固定定位(Affix)
  • 原文地址:https://www.cnblogs.com/lengp/p/4238498.html
Copyright © 2011-2022 走看看