table2excel将HTML表格内容导出到Excel基础使用

六月初六月初 JavaScipt 2019-05-28 11:58:08

前端将HTML中的表格内容导出到Excel中，table2excel基础使用步骤：

1、引入jq、jquery.table2excel.js（该插件是基于jq的）

2、table加入table2excel效果，关键代码如下：

$(".table2excel").table2excel({
	exclude: ".noExl",
	name: "Excel Document Name",
	filename: "myFileName",
	exclude_img: true,
	exclude_links: true,
	exclude_inputs: true
});

参数解析：

//exclude：不被导出的表格行的CSS class类。
//name：导出的Excel文档的名称。
//filename：Excel文件的名称。
//exclude_img：是否导出图片。
//exclude_links：是否导出超链接
//exclude_inputs：是否导出输入框中的内容。  

完整代码：

<!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>table2excel-可将HTML表格内容导出到Excel中的jQuery插件 </title>
	<link rel="stylesheet" href="http://libs.baidu.com/bootstrap/3.2.0/css/bootstrap.min.css">
	<!--[if IE]>
		<script src="http://libs.baidu.com/html5shiv/3.7/html5shiv.min.js"></script>
	<![endif]-->
</head>
<body>
	<header class="jq22-header">
		<h4>table2excel-可将HTML表格内容导出到Excel中的jQuery插件 <span>jQuery Plugin to export HTML tabled to Excel Spreadsheet Compatible Files</span></h4>
		
	</header>
	<section class="jq22-container">
		<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  class="a">
					      	<td>单元格2-1</td>
					      	<td>单元格2-2</td>
					      </tr>
					      <tr class="a">
					      	<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>
			<button id="btn1" class="btn btn-primary">点击移除部分数据</button>
		</div>
	</section>

	
	<script src="http://www.jq22.com/jquery/1.11.1/jquery.min.js"></script>
	<script>window.jQuery || document.write('<script src="js/jquery-1.11.0.min.js"><\/script>')</script>
	<script src="dist/jquery.table2excel.js"></script>
	<script>
		$(function() {
			$("#btn1").click(function(){
				$(".a").remove()
			});
			$("#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>

百度云盘代码地址：

链接：https://pan.baidu.com/s/1tBNJMgPA6pEIiuJXS4RFOg    （be48 ）


六月初字帖坊小程序 你想要的字帖模板及工具，这里都有！