js常用插件之jsonExportExcel导出表格(后台系统必备)
欢迎点击: 个人官网博客
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./vue.js"></script>
<script src="./jsonExportExcel.js"></script>
</head>
<body>
<div id='app'>
<button @click='getExcel'>导出</button>
</div>
</body>
<script>
new Vue({
el: '#app',
methods: {
getExcel() {
var option = {
};
option.fileName = 'excel'
option.datas = [{
sheetData: [ //后端返回的数据表格json数据
{
name: 'lili',
age: '18'
},
{
name: 'mary',
age: '20'
}
],
sheetHeader: ['姓名', '年龄'] //前端指定的表头
},
{
sheetData: [ //表格2的内容
{
name: 'lili',
grade: '90'
},
{
name: 'mary',
grade: '99'
}
],
sheetHeader: ['姓名', '成绩']
}
];
var toExcel = new ExportJsonExcel(option);
toExcel.saveExcel()
}
}
})
</script>
</html>
导出来的数据效果如下: