jQuery实现页面数据导出成.json文件

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="libs/jquery-1.11.2.js"></script>
	<script type="text/javascript" src="libs/jquery.tabletojson.js"></script>
</head>
<body>
	<table id="answered">
		<thead>
			<tr>
				<td>姓名</td>
				<td>年龄</td>
				<td>班级</td>
			</tr>
		</thead>
		<tbody>
		    <tr>
		      <td>lili</td>
		      <td>18</td>
		      <td>2班</td>
		    </tr>
		</tbody>
	</table>
	<button>导出json数据</button>

	<script type="text/javascript">
		$(button).click( function() {
			//把表格转化成json数据
			var table = $(table).tableToJSON(); // Convert the table into a javascript object
			alert(JSON.stringify(table));
			console.log(table);
			console.log(JSON.stringify(table));

		  	// 下载文件方法
			var funDownload = function(content, filename) {
				var eleLink = document.createElement(a);
				eleLink.download = filename;
				eleLink.style.display = none;
				// 字符内容转变成blob地址
				var blob = new Blob([content]);
				eleLink.href = URL.createObjectURL(blob);
				// 触发点击
				document.body.appendChild(eleLink);
				eleLink.click();
				// 然后移除
				document.body.removeChild(eleLink);
			};
			
			if(download in document.createElement(a)) {
				funDownload(JSON.stringify(table), testInfo.json);
			} else {
				alert(浏览器不支持);
			}

		});
	</script>
</body>
</html>

这里用到jQuery的开源插件Table-to-json:

官方地址:

功能说明:将js对象table转换成对象,输出json数据字符串。

经验分享 程序员 微信小程序 职场和发展