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(); } })()