很多时候一些工具平台需要开发报表,以便于直观的展示数据成果。报表还需要有导出等功能,后台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>