jQuery HTML表格生成Excel文件插件js特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery HTML表格生成Excel文件插件js特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery HTML表格生成Excel文件插件</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">
</head>
<body>
<section class="zzsc">
	<div class="container" style="padding:30px 0">
		<div class="row">
			<div class="md-col-8">
				<div class="table-responsive table2excel" data-tableName="Test Table 1">
				  <table class="table table-striped table-bordered table-hover">
					<thead>
					  <tr class="noExl">
						<td class="danger">带<code>noExl</code>class的行不会被输出到excel中</td>
						<td class="danger">带<code>noExl</code>class的行不会被输出到excel中</td>
					  </tr>
					  <tr>
						<td class="success">这一行会被导出到excel中</td>
						<td class="success">这一行会被导出到excel中</td>
					  </tr>
					</thead>
					<tbody>
					  <tr>
						<td>单元格1-1</td>
						<td>单元格1-2</td>
					  </tr>
					  <tr>
						<td>单元格2-1</td>
						<td>单元格2-2</td>
					  </tr>
					  <tr>
						<td>单元格3-1</td>
						<td>单元格3-2</td>
					  </tr>
					</tbody>
					<tfoot>
						<tr>
						<td colspan="2" class="warning">合并2个单元格</td>
						</tr>
					</tfoot>
				  </table>
				</div>
			</div>
		</div>
		<button id="btn" class="btn btn-primary">点击这里将表格内容导出到excel中</button>
	</div>
</section>

<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="dist/jquery.table2excel.js"></script>
<script>
	$(function() {
		$("#btn").click(function(){
			$(".table2excel").table2excel({
				exclude: ".noExl",
				name: "Excel Document Name",
				filename: "myFileName",
				exclude_img: true,
				exclude_links: true,
				exclude_inputs: true
			});
		});
		
	});
</script>
</body>
</html>

CSS代码(htmleaf-demo.css):

body,html{font-size:100%;padding:0;margin:0;}
body{font-weight:500;font-size:1.05em;font-family:"Microsoft YaHei","宋体","Segoe UI","Lucida Grande",Helvetica,Arial,sans-serif,FreeSans,Arimo;}
a{color:#2fa0ec;text-decoration:none;outline:none;}
a:hover,a:focus{color:#74777b;}
.zzsc{margin:0 auto;text-align:center;overflow:hidden;}

附件:下载该文件资源,减少时间成本(增值服务)