jquery4种导出excel方法(已测试)
第一种：（导出格式：csv、txt、excel、word、png）
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<div>
<ul class="dropdown-menu">
<li>
<a onclick="$('#stats_datatable').tableExport({type:'csv',escape:'false',filename:'(2016-02-29_2016-03-06)'});" href="#">
导出格式-CSV
</a>
</li>
<li>
<a onclick="$('#stats_datatable').tableExport({type:'txt',escape:'false',filename:'(2016-02-29_2016-03-06)'});" href="#">
导出格式-TXT
</a>
</li>
<li>
<a onclick="$('#stats_datatable').tableExport({type:'excel',escape:'false',filename:'(2016-02-29_2016-03-06)'});" href="#">
导出格式-Excel
</a>
</li>
<li>
<a onclick="$('#stats_datatable').tableExport({type:'doc',escape:'false',filename:'(2016-02-29_2016-03-06)'});" href="#">
导出格式-Word
</a>
</li>
<li>
<a onclick="$('#stats_datatable').tableExport({type:'png',escape:'false',filename:'(2016-02-29_2016-03-06)'});" href="#">
导出格式-PNG
</a>
</li>
</ul>
</div>
<div class="panel-body">
<table id="stats_datatable" class="table datatable">
<thead>
<tr>
<th>名称</th>
<th>里程</th>
<th>次数</th>
<th>天数</th>
<th>签到</th>
<th>活动</th>
<th>时间周期</th>
<th>更新时间</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<!-- START SCRIPTS -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<!-- 数据表 -->
<script src="js/tableExport.js"></script>
<script src="js/mybase.js"></script>
<script>
$(function () {
//=======让解码后中文不出现乱码的方法
data = $.base64({ data: "已经编码过后的base64", type: 1, unicode: true });
//=或
data = $.base64({ data: "已经编码过后的base64", type: 1 });
console.log(data);
//downloadFile("myexcel.xls", data);
});
</script>
</body>
</html>
第二种：（导出数据量少的情况导出带样式的）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数据量少的情况导出带样式的</title>
<style>
table td {
font-size: 12px;
width: 200px;
height: 30px;
text-align: center;
background-color: #4f891e;
color: #ffffff;
}
</style>
</head>
<body>
<a download="table导出Excel" id="excelOut" href="#">table导出Excel</a>
<table cellspacing="0" cellpadding="0" border="1" id="tableToExcel">
<thead>
<tr>
<td>公司一</td>
<td>公司二一</td>
<td>公司三</td>
</tr>
</thead>
<tbody>
<tr>
<td>A公司</td>
<td>B公司</td>
<td>C公司</td>
</tr>
<tr>
<td>A公司</td>
<td>B公司</td>
<td>C公司</td>
</tr>
<tr>
<td>A公司</td>
<td>B公司</td>
<td>C公司</td>
</tr>
<tr>
<td colspan="3">共计</td>
</tr>
</tbody>
</table>
<script>
window.onload = function () {
tableToExcel('tableToExcel', '下载模板')
};
//base64转码
var base64 = function (s) {
return window.btoa(unescape(encodeURIComponent(s)));
};
//替换table数据和worksheet名字
var format = function (s, c) {
return s.replace(/{(\w+)}/g,
function (m, p) {
return c[p];
});
}
function tableToExcel(tableid, sheetName) {
var uri = 'data:application/vnd.ms-excel;base64,';
var 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]-->' +
' <style type="text/css">' +
'table td {' +
'border: 1px solid #000000;' +
'width: 200px;' +
'height: 30px;' +
' text-align: center;' +
'background-color: #4f891e;' +
'color: #ffffff;' +
' }' +
'</style>' +
'</head><body ><table class="excelTable">{table}</table></body></html>';
if (!tableid.nodeType) tableid = document.getElementById(tableid);
var ctx = { worksheet: sheetName || 'Worksheet', table: tableid.innerHTML };
document.getElementById("excelOut").href = uri + base64(format(template, ctx));
}
</script>
</body>
</html>
第三种：（导出数据量稍大，但是附带的有html标签未修改完善）
my_tableExcel.js 百度网盘下载地址：https://pan.baidu.com/s/1smU3fTb
<html>
<head>
<title>Demo Jquery Table2Excel</title>
</head>
<body>
<table style="width: 100%;" cellpadding=0 cellspacing=0 border="1" id="tblExport">
<tr>
<td colspan="5" align="center">
<h2>成绩单</h2>
</td>
</tr>
<tr>
<td align="center">2</td>
<td style="background-color: #00CC00;" align="center">Tom</td>
<td style="background-color: #00adee;" align="center">99</td>
<td style="background-color: #00CC00;" align="center">85</td>
<td style="background-color: #00adee;" align="center">80</td>
</tr>
<tr>
<td align="center">2</td>
<td style="background-color: #00CC00;" align="center">Tom</td>
<td style="background-color: #00adee;" align="center">99</td>
<td style="background-color: #00CC00;" align="center">85</td>
<td style="background-color: #00adee;" align="center">80</td>
</tr>
<tr>
<td align="center">1</td>
<td style="background-color: #00CC00;" align="center">Jone</td>
<td style="background-color: #00adee;" align="center">90</td>
<td style="background-color: #00CC00;" align="center">85</td>
<td style="background-color: #00adee;" align="center">100</td>
</tr>
<tr>
<td align="center">2</td>
<td style="background-color: #00CC00;" align="center">Tom</td>
<td style="background-color: #00adee;" align="center">99</td>
<td style="background-color: #00CC00;" align="center">85</td>
<td style="background-color: #00adee;" align="center">80</td>
</tr>
<tr>
<td colspan="5" align="center">
<h2>成绩单</h2>
</td>
</tr>
<tr>
<td style='width:54pt' align="center">编号</td>
<td style='width:54pt' align="center">姓名</td>
<td style='width:54pt' align="center">语文</td>
<td style='width:54pt' align="center">数学</td>
<td style='width:54pt' align="center">英语</td>
</tr>
<tr>
<td style='width:54pt' align="center">编号</td>
<td style='width:54pt' align="center">姓名</td>
<td style='width:54pt' align="center">语文</td>
<td style='width:54pt' align="center">数学</td>
<td style='width:54pt' align="center">英语</td>
</tr>
<tr>
<td style='width:54pt' align="center">编号</td>
<td style='width:54pt' align="center">姓名</td>
<td style='width:54pt' align="center">语文</td>
<td style='width:54pt' align="center">数学</td>
<td style='width:54pt' align="center">英语</td>
</tr>
<tr>
<td style='width:54pt' align="center">编号</td>
<td style='width:54pt' align="center">姓名</td>
<td style='width:54pt' align="center">语文</td>
<td style='width:54pt' align="center">数学</td>
<td style='width:54pt' align="center">英语</td>
</tr>
<tr>
<td style='width:54pt' align="center">编号</td>
<td style='width:54pt' align="center">姓名</td>
<td style='width:54pt' align="center">语文</td>
<td style='width:54pt' align="center">数学</td>
<td style='width:54pt' align="center">英语</td>
</tr>
<tr>
<td style='width:54pt' align="center">编号</td>
<td style='width:54pt' align="center">姓名</td>
<td style='width:54pt' align="center">语文</td>
<td style='width:54pt' align="center">数学</td>
<td style='width:54pt' align="center">英语</td>
</tr>
<tr>
<td style='width:54pt' align="center">编号</td>
<td style='width:54pt' align="center">姓名</td>
<td style='width:54pt' align="center">语文</td>
<td style='width:54pt' align="center">数学</td>
<td style='width:54pt' align="center">英语</td>
</tr>
<tr>
<td style='width:54pt' align="center">编号</td>
<td style='width:54pt' align="center">姓名</td>
<td style='width:54pt' align="center">语文</td>
<td style='width:54pt' align="center">数学</td>
<td style='width:54pt' align="center">英语</td>
</tr>
<tr>
<td colspan="5" align="center">
<h2>成绩单</h2>
</td>
</tr>
<tr>
<td style='width:54pt' align="center">编号</td>
<td style='width:54pt' align="center">姓名</td>
<td style='width:54pt' align="center">语文</td>
<td style='width:54pt' align="center">数学</td>
<td style='width:54pt' align="center">英语</td>
</tr>
<tr>
<td style='width:54pt' align="center">编号</td>
<td style='width:54pt' align="center">姓名</td>
<td style='width:54pt' align="center">语文</td>
<td style='width:54pt' align="center">数学</td>
<td style='width:54pt' align="center">英语</td>
</tr>
<tr>
<td style='width:54pt' align="center">编号</td>
<td style='width:54pt' align="center">姓名</td>
<td style='width:54pt' align="center">语文</td>
<td style='width:54pt' align="center">数学</td>
<td style='width:54pt' align="center">英语</td>
</tr>
<tr>
<td style='width:54pt' align="center">编号</td>
<td style='width:54pt' align="center">姓名</td>
<td style='width:54pt' align="center">语文</td>
<td style='width:54pt' align="center">数学</td>
<td style='width:54pt' align="center">英语</td>
</tr>
</table>
<button id="btnExport">导出为Excel</button>
</body>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="../js/my_tableExcel.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#btnExport").click(function () {//按钮
$("#tblExport").tableExport();//方法1需要引用my_tableExcel.js
//fnExcelReport();//方法2
//tablesToExcel();//方法3
});
});
function fnExcelReport() {
var tab_text = "<table border='2px'><tr bgcolor='#87AFC6'>";
var textRange; var j = 0;
tab = document.getElementById('tblExport'); // id of table
for (j = 0 ; j < tab.rows.length ; j++) {
tab_text = tab_text + tab.rows[j].innerHTML + "</tr>";
//tab_text=tab_text+"</tr>";
}
tab_text = tab_text + "</table>";
tab_text = tab_text.replace(/<A[^>]*>|<\/A>/g, "");//remove if u want links in your table
tab_text = tab_text.replace(/<img[^>]*>/gi, ""); // remove if u want images in your table
tab_text = tab_text.replace(/<input[^>]*>|<\/input>/gi, ""); // reomves input params
var ua = window.navigator.userAgent;
var msie = ua.indexOf("MSIE ");
if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) // If Internet Explorer
{
txtArea1.document.open("txt/html", "replace");
txtArea1.document.write(tab_text);
txtArea1.document.close();
txtArea1.focus();
sa = txtArea1.document.execCommand("SaveAs", true, "Say Thanks to Sumit.xls");
}
else //other browser not tested on IE 11
sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));
return (sa);
}
function tablesToExcel() {
var tab_text = "<table border='2px'><tr bgcolor='#87AFC6'>";
var textRange; var j = 0;
tab = document.getElementById('tblExport'); // id of table
for (j = 0 ; j < tab.rows.length ; j++) {
tab_text = tab_text + tab.rows[j].innerHTML + "</tr>";
//tab_text=tab_text+"</tr>";
}
tab_text = tab_text + "</table>";
var ua = window.navigator.userAgent;
var msie = ua.indexOf("MSIE ");
if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) // If Internet Explorer
{
txtArea1.document.open("txt/html", "replace");
txtArea1.document.write(tab_text);
txtArea1.document.close();
txtArea1.focus();
sa = txtArea1.document.execCommand("SaveAs", true, "Say Thanks to Sumit.xls");
}
else //other browser not tested on IE 11
sa = window.open('data:application/vnd.ms-excel,' + encodeURIComponent(tab_text));
return (sa);
}
</script>
</html>
第四种：（jquery.table2excel.js百度网盘下载：https://pan.baidu.com/s/1jKjA2Nk）
调用方法
$("#table1").table2excel({
exclude: ".noExl", //过滤位置的 css 类名
filename: "权限清单-" + new Date().getTime() + ".xls" //文件名称
});
这4种方法也是从网上搜集来的，良心保证亲测可用，有BUG的话欢迎大家指正修改
浙公网安备 33010602011771号