<!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:
官方地址：http://lightswitch05.github.io/table-to-json/
功能说明：将js对象table转换成javascript对象，输出json数据字符串。