Jquery将table转换成excel实现下载

最新推荐文章于 2024-04-15 09:54:47 发布

过客璇璇

最新推荐文章于 2024-04-15 09:54:47 发布

阅读量1.1k

点赞数 1

分类专栏： html jquery

本文链接：https://blog.csdn.net/qq_36706878/article/details/102915987

版权

jquery 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

html

9 篇文章 0 订阅

订阅专栏

首先在html上设计一个简单的表格和一个a标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery.js"></script>
		<script src="js/table.js"></script>
	</head>
	<body>
		<div>
			<div>
				<a id="a_export">导出下方表格数据</a>
			</div>
			<div>
				<table id="table">
					<tr>
						<th>名字</th>
						<th>性别</th>
						<th>城市</th>
					</tr>
					<tr>
						<td>陈</td>
						<td>男</td>
						<td>北京</td>
					</tr>
					<tr>
						<td>孔</td>
						<td>女</td>
						<td>北京</td>
					</tr>
				</table>
			</div>
		</div>
	</body>
</html>

效果如下：

接下来编写相应的js文件

$(document).ready(function(){
	var base64 = function (s) { return window.btoa(unescape(encodeURIComponent(s))) };
	var format = function (s, c) {
		return s.replace(/{(\w+)}/g,
		function (m, p) {
			return c[p];
		});
	};
	var uri = "data:application/vnd.ms-excel;base64,";
	var template = "<html><head><meta charset='UTF-8'></head><body><table>{table}</table></body></html>";
	var table = document.getElementById("table");
	var ctx = { worksheet: "Worksheet", table: table.innerHTML };
	//window.location.href = uri + base64(format(template, ctx));
	document.getElementById("a_export").href = uri + base64(format(template, ctx));
	document.getElementById("a_export").download = "导出测试.xls";
})

我定义的js文件为table.js 上面的html中引入

测试