很多時候一些工具平台需要開發報表,以便於直觀的展示數據成果。報表還需要有導出等功能,后台servlet導出用慣了。有沒有簡單的根據html頁面的table導出??
hiahiahia,被我找到了(excel打開時會有個提示,無需理會。直接選“是”即可。否則可能會無數據)。
首先來創建js文件:
export-excel.js
(function ($) { Date.prototype.Format = function (fmt) { var o = { "M+": this.getMonth() + 1, //月份 "d+": this.getDate(), //日 "h+": this.getHours(), //小時 "m+": this.getMinutes(), //分 "s+": this.getSeconds(), //秒 "q+": Math.floor((this.getMonth() + 3) / 3), //季度 "S": this.getMilliseconds() //毫秒 }; if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length)); for (var k in o) if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length))); return fmt; } $.fn.ExportExcel = function (thread_id,tab_id, options) { var defaults = { height: '24px', 'line-height': '24px', margin: '0 5px', padding: '0 11px', color: '#000', background: '#02bafa', border: '1px #26bbdb solid', 'border-radius': '3px', /*color: #fff;*/ display: 'inline-block', 'text-decoration': 'none', 'font-size': '12px', outline: 'none', cursor: 'pointer' } var options = $.extend(defaults, options); return this.each(function () { var currentObject = $(this); //獲取當前對象 currentObject.css(defaults); currentObject.onmouseover = function () { $(this).css('cursor', 'hand'); }; currentObject.click(function () { //From:jsfiddle.net/h42y4ke2/16/ var tab_text = '<html xmlns:x="urn:schemas-microsoft-com:office:excel">'; tab_text = tab_text + '<head><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>'; tab_text = tab_text + '<x:Name>Test Sheet</x:Name>'; tab_text = tab_text + '<x:WorksheetOptions><x:Panes></x:Panes></x:WorksheetOptions></x:ExcelWorksheet>'; tab_text = tab_text + '</x:ExcelWorksheets></x:ExcelWorkbook></xml></head><body>'; tab_text = tab_text + "<table border='1px'>"; tab_text = tab_text + $('#' + thread_id).html(); tab_text = tab_text + $('#' + tab_id).html(); tab_text = tab_text + '</table></body></html>'; var data_type = 'data:application/vnd.ms-excel'; var timeStr = new Date().Format('yyyyMMddhhmmss'); $(this).attr('href', data_type + ', ' + encodeURIComponent(tab_text)); $(this).attr('download', '日常數據報表' + timeStr + '.xls'); }); }) } })(jQuery);
html頁面:
<html> <a href="#" id="export">導出</a> <table> <thead id="theadDate"> <tr> <th>姓名</th> <th>班級</th> <th>年齡</th> </tr> </thead> <tbody id="tbodyDate"> <tr> <td>張三</td> <td>高二</td> <td>18</td> </tr> <tr> <td>李四</td> <td>高三</td> <td>20</td> </tr> </tbody> </table> <script src="assets/javascripts/autotest/export-excel.js" ></script> <!-- 引入js文件--> <script type="text/javascript"> //導出 調用 $(function () { $('#export').ExportExcel('theadDate','tbodyDate'); //tbodyDate為table的id,export為a標簽。 }); </script> </html>