超级好用的网页table 导出excel
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了超级好用的网页table 导出excel相关的知识，希望对你有一定的参考价值。
最近发现一个封装的js插件导出网页中的table 为excel 超级好用，基本不用写代码
(function ($) {
Date.prototype.Format = function (fmt) { //author: meizz
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 (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 + $(‘#‘ + 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);
把此代码封装起来。
命名为ExcelTable.js
注意：需用a标签 <a href="javascript:;" id="downloadExcel">导出Excel</a>
例如：
<table class="table table-bordered" id="table_a">
<thead>
<tr>
<th rowspan="3" style="width:30px;">序号</th>
<th rowspan="3">所属银行</th>
<th rowspan="3">时间</th>
<th rowspan="3">调剂类型</th>
<th colspan="8">硬币</th>
<th colspan="12">零钞</th>
</tr>
<tr>
<th colspan="2">1元</th>
<th colspan="2">5角</th>
<th colspan="2">1角</th>
<th colspan="2">小计</th>
<th colspan="2">10元</th>
<th colspan="2">5元</th>
<th colspan="2">1元</th>
<th colspan="2">5角</th>
<th colspan="2">1角</th>
<th colspan="2">小计</th>
</tr>
<tr>
<th>金额</th>
<th>枚数</th>
<th>金额</th>
<th>枚数</th>
<th>金额</th>
<th>枚数</th>
<th>金额</th>
<th>枚数</th>
<th>金额</th>
<th>张</th>
<th>金额</th>
<th>张</th>
<th>金额</th>
<th>张</th>
<th>金额</th>
<th>张</th>
<th>金额</th>
<th>张</th>
<th>金额</th>
<th>张</th>
</tr>
</thead>
<tbody class="table_tbody">
</tbody>
</table>
点击a标签导出时：
<script type="text/javascript">
$(function () {
$(‘#downloadExcel‘).ExportExcel(‘table_a‘);
})
</script>
此次转载的是：<文大官人>（虚拟称呼）
注意:转载请注明。
以上是关于超级好用的网页table 导出excel的主要内容，如果未能解决你的问题，请参考以下文章
Chrome下怎么用jquery脚本把网页中的table中的数据以excel格式导出啊，浏览器一定要是chrome的，不要ie的