jQuery导出页面表格为xlsx,xls,csv,txt格式的文件 Demo附带js文件

首先上效果图



虽然你会下载Demo,但是我还是想在这里写出来

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>

	<!--
    	时间:2018-03-19
    	描述:引入cdn上的bootstrap的css和js文件
    -->
	<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
	<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

	<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
	<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

	<!--
    	时间:2018-03-19
    	描述:引入cdn上的JQuery文件
    -->
	<script src="http://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>

	<!--
    	时间:2018-03-19
    	描述:导出Excel相关的js文件
    -->
	<script src="js/xlsx.core.min.js"></script>
	<script src="js/blob.js"></script>
	<script src="js/FileSaver.min.js"></script>
	<script src="js/tableexport.js"></script>

	<body>
		<br /><br />
		<br />
		<script type="text/javascript">
			$(function() {
				$("table").tableExport({
					// 这里面写导出的格式
					formats: ["xlsx","xls","csv","txt"]
				});
			})
		</script>
		<br />
		<table class="table table-bordered">
			<tr>
				<th>Month</th>
				<th>Savings</th>
				<th>Address</th>
				<th>这列中文</th>
			</tr>
			<tr>
				<td>January</td>
				<td>$100</td>
				<td>Beijing</td>
				<td>为啥是中文</td>
			</tr>
			<tr>
				<td>Tom</td>
				<td>$890</td>
				<td>Beijing</td>
				<td>因为需要</td>
			</tr>

			<tr>
				<td>Asil</td>
				<td>$180</td>
				<td>Beijing</td>
				<td>就这样</td>
			</tr>
		</table>
<hr />

<div class="alert alert-info" role="alert">修改上面四个按钮显示的内容在 js/tableexport.js内的163-192行 打开修改保存即可</div>

<div class="alert alert-info" role="alert">修改导出文件的名字在js/tableexport.js内的194行  打开修改保存即可</div>
	</body>

</html>
源码下载地址:https://download.csdn.net/download/qq_24484085/10295301

猜你喜欢

转载自blog.csdn.net/qq_24484085/article/details/79611446