超级好用的网页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>

此次转载的是:<文大官人>(虚拟称呼)

注意:转载请注明。

时间: 2024-11-08 18:08:25

超级好用的网页table 导出excel的相关文章

支持IE,FireFox,Chrome三大主流浏览器,通过js+Flash方式将table导出Excel文件

今天在做项目的时候,遇到了前端下载Excel的功能,结果原先的代码,如下: function generate_excel(tableid) {        var table = document.getElementById(tableid);         var html = table.outerHTML;         window.open('data:application/vnd.ms-excel;base64,' + base64_encode(html)); } 此种

C#将网页数据导出Excel时编码设置

1 public void DGToExcel() 2 { 3 Response.ClearContent(); 4 Response.Charset = "GB2312";//内容编码 5 Response.ContentType = "application/ms-excel"; 6 Response.ContentEncoding = System.Text.Encoding.GetEncoding("GB2312");//内容编码 7 R

js 前端 table 导出 excel

园子,github,stackoverflow 关于前端下载的文章不少 园子里大部分都是 利用ActiveXObject对象来实现,可他有个缺点安全等级,还有必须安装excel…… github,stackoverflow  有点高大上了,几乎全是英文……无奈只能看看代码了,还好找到了一个比较好的方法 直接上代码:还是看原文好 https://github.com/rainabba/jquery-table2excel http://stackoverflow.com/questions/171

JS 将表格table导出excel

function tableToExcel(id) { var tb = document.getElementById(id); var html = '<html><head><meta charset="UTF-8"></head><body><table>' + tb.innerHTML + '</table></body></html>'; html = window.

ASP.net MVC把Html Table导出Excel

[HttpPost] public ActionResult ExportExcel(FormCollection form) { string strHtml = form["hHtml"]; strHtml = HttpUtility.HtmlDecode(strHtml);//Html解码 byte[] b = System.Text.Encoding.Default.GetBytes(strHtml);//字串转byte阵列 return File(b, "appli

原生JavaScript 导出excel表格(兼容ie和其他主流浏览器)

因同事的需求是想前端导出excel表格,网上找了一些demo,自己修改了一下,可能以后会用到,记录下来吧,兼容ie和一些主流浏览器,ie可能会报错,原因参考 这里,edge 浏览器还没有办法导出,正在尝试... <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>table 导出excel表格</title>

前端JS脚本将网页表格导出为Excel

话不多说,上代码! <!DOCTYPE> <html> <head> <title>Excel Test</title> </head> <body> <div style="width:100%;padding:40px;"> Excel Test </div> <table id="excel"> <tr> <td>Na

将table导出为Excel的标准无乱码写法

导出为Excel有很多种写法,对于一些复杂的格式,笔者喜欢在后台先拼成一个<table>,再使用Response输出. 如果数据中包含中文或者一些特殊字符,可很多不规范的写法都会导致页面乱码,这里就把一种(笔者认为)最标准的格式带给大家: Page p = HttpContext.Current.Handler as Page; p.Response.Clear(); p.Response.Buffer = true; p.Response.Charset = "UTF-8"

导出table为Excel

1.HTML <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>table export</title> </head> <body> <table id="table2"> <thead> <tr> <td>