用js方法把表格导出execl

最新推荐文章于 2023-02-01 14:42:10 发布

原创最新推荐文章于 2023-02-01 14:42:10 发布 · 496 阅读

0 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种使用JavaScript将数据导出为Excel表格的方法。通过拼接HTML代码生成table，并利用Blob对象转换为Excel文件，实现数据的快速导出。

用此js方法导出的不是真正的execl（想导出真正execl的请离开，如需请用后台导出），不是xlsx，而是xls的文件（确切说是html文件只不过可以用execl打开浏览），不过这个可以在execl下正常浏览

根据需求主要是按给到的数据来导出execl，也可以直接导出已经存在在页面上的table，稍微改一下代码即可（可以看代码上的注释）。
1.给到表头数据
2.给到内容信息数据
3.根据用户搜索条件导出execl（后面用到need_data）

主方法GetExcel()：
Table是表格代码，因为是根据数据导出，我这里用的是拼接。如果只是导出页面上已经存在的table可以直接用outerhtml。
在这里插入图片描述
相关代码

				function GetExecl(){
						
						//生成的table方法,这里是用数据导出,所以这样写(也可以用js中的outerHTML直接把表格导出)
						var Table = "<table>" + TheadHtml(th_data) + TbodyHtml(td_data) + "</table>"

						// 获取thead和tbody组合成完整的HTML文档，设置charset为urf-8以防止中文乱码
						var html = "<html><head><meta charset='utf-8' /></head><body>" + Table + "</body></html>";
						// 实例化一个Blob对象，其构造函数的第一个参数是包含文件内容的数组，第二个参数是包含文件类型属性的对象
						var blob = new Blob([html], { type: "application/vnd.ms-excel" });
						// 利用URL.createObjectURL()方法为a元素生成blob URL
						document.getElementById("download").href = URL.createObjectURL(blob);
						// 设置文件名
						document.getElementById("download").download = "员工信息表.xls";
				}

模拟数据
th_data：表头数据
td_data：内容数据
need_data是需求对象，如没有需求可以不写
在这里插入图片描述
相关代码

				// 模拟的表头和信息表
				var th_data = ["员工编号", "手机号码", "员工名称", "类型", "状态"]
				var td_data=[
						{UserId: "00095322", UserName: "aaaa599", MobilePhone: "15032314599",Starttime:"09-12-01",Type:"1",State:"在职",Note:""},
						{UserId: "000cde59", UserName: "aaaa498", MobilePhone: "15032314498",Starttime:"11-05-25",Type:"2",State:"离职",Note:""},
						{UserId: "00033422", UserName: "aaaa433", MobilePhone: "15032314497",Starttime:"05-11-20",Type:"1",State:"在职",Note:""},
						{UserId: "000c34d9", UserName: "aaaa398", MobilePhone: "15032314496",Starttime:"03-08-22",Type:"2",State:"在职",Note:""},
						{UserId: "000cdfds", UserName: "aaaa438", MobilePhone: "15032314495",Starttime:"13-09-23",Type:"1",State:"离职",Note:""},
					]
				//从内容信息数据中获取有自己需要信息的对象
				var need_data={UserId:"",UserName:"",MobilePhone:"",Type:"",State:""}

表头代码

根据表头数组遍历，输出thead
在这里插入图片描述
相关代码

				//表头拼接
				function TheadHtml(data) {
						var thead = "";
						data.forEach(function (val) {
								let item = "<th>" + val + "</th>"
								thead += item
						})
						return "<thead><tr>" + thead + "</tr></thead>"
				}

内容信息

先遍历内容数据，再更具keys要求遍历出每一项的数据赋值给tr，输出tbody
在这里插入图片描述
相关代码

				//内容信息拼接
				function TbodyHtml(data) {
						var tbody = ""
						var keys = []
						//用for遍历出keys放入数组,如果need_data给的是数组,就不需要for循环,直接用forEach循环即可.注forEach循环的必须是数组,不然就会报foreach not a function.
						for (var key in need_data) {
								keys.push(key)
						};
						
						data.forEach(function (val) {
								var tr = ""
								keys.forEach(function (val1) {
										let item = "<td>" + val[val1] + "</td>"
										tr += item
								})
								tbody += "<tr>" + tr + "</tr>"
						})
						return "<thbody>" + tbody + "</tr></tbody>"
				}

html内容
在这里插入图片描述
相关代码

<a id="download"  onclick="GetExecl()" >导出表格</a>

完整html代码

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
</head>
<body>

    <a id="download"  onclick="GetExecl()" >导出表格</a>
		
    <script type="text/javascript">
				// 模拟的表头和信息表
				var th_data = ["员工编号", "手机号码", "员工名称", "类型", "状态"]
				var td_data=[
						{UserId: "00095322", UserName: "aaaa599", MobilePhone: "15032314599",Starttime:"09-12-01",Type:"1",State:"在职",Note:""},
						{UserId: "000cde59", UserName: "aaaa498", MobilePhone: "15032314498",Starttime:"11-05-25",Type:"2",State:"离职",Note:""},
						{UserId: "00033422", UserName: "aaaa433", MobilePhone: "15032314497",Starttime:"05-11-20",Type:"1",State:"在职",Note:""},
						{UserId: "000c34d9", UserName: "aaaa398", MobilePhone: "15032314496",Starttime:"03-08-22",Type:"2",State:"在职",Note:""},
						{UserId: "000cdfds", UserName: "aaaa438", MobilePhone: "15032314495",Starttime:"13-09-23",Type:"1",State:"离职",Note:""},
					]
				//从内容信息数据中获取有自己需要信息的对象
				var need_data={UserId:"",UserName:"",MobilePhone:"",Type:"",State:""}

				function GetExecl(){
						
						//生成的table方法,这里是用数据导出,所以这样写(也可以用js中的outerHTML直接把表格导出)
						var Table = "<table>" + TheadHtml(th_data) + TbodyHtml(td_data) + "</table>"

						// 获取thead和tbody组合成完整的HTML文档，设置charset为urf-8以防止中文乱码
						var html = "<html><head><meta charset='utf-8' /></head><body>" + Table + "</body></html>";
						// 实例化一个Blob对象，其构造函数的第一个参数是包含文件内容的数组，第二个参数是包含文件类型属性的对象
						var blob = new Blob([html], { type: "application/vnd.ms-excel" });
						// 利用URL.createObjectURL()方法为a元素生成blob URL
						document.getElementById("download").href = URL.createObjectURL(blob);
						// 设置文件名
						document.getElementById("download").download = "员工信息表.xls";
				}
		
				//表头拼接
				function TheadHtml(data) {
						var thead = "";
						data.forEach(function (val) {
								let item = "<th>" + val + "</th>"
								thead += item
						})
						return "<thead><tr>" + thead + "</tr></thead>"
				}
				//内容信息拼接
				function TbodyHtml(data) {
						var tbody = ""
						var keys = []
						//用for遍历出keys放入数组,如果need_data给的是数组,就不需要for循环,直接用forEach循环即可.注forEach循环的必须是数组,不然就会报foreach not a function.
						for (var key in need_data) {
								keys.push(key)
						};
						
						data.forEach(function (val) {
								var tr = ""
								keys.forEach(function (val1) {
										let item = "<td>" + val[val1] + "</td>"
										tr += item
								})
								tbody += "<tr>" + tr + "</tr>"
						})
						return "<thbody>" + tbody + "</tr></tbody>"
				}

    </script>
</body>
</html>