js 前端 table 導出 excel

時間 2019-11-30

標籤前端 table 導出 excel 欄目 JavaScript 简体版

原文原文鏈接

　　園子，github，stackoverflow 關於前端下載的文章很多javascript

　　園子裏大部分都是利用ActiveXObject對象來實現，可他有個缺點安全等級，還有必須安裝excel……html

　　github,stackoverflow 有點高大上了，幾乎全是英文……無奈只能看看代碼了，還好找到了一個比較好的方法前端

　　直接上代碼：仍是看原文好 java

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

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

　　固然一個須要引入jquery庫，可也以本身去修改……git

　　html table內容github

 <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 源碼app

/* 
*  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();

            }
        })()

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。