1,安装并引入这个插件
import ExportJsonExcel from "js-export-excel";
2,定义一点测试数据,正常是接口返回的数据
list: [
{
'username': '张三',
'number': '111111111',
'class': '一年级1班',
},
{
'username': '李四',
'number': '2222222',
'class': '二年级2班',
},
{
'username': '王二麻子',
'number': '55555',
'class': '三年级3班1',
},
],
3,定义生成表格数据的函数
exportToExcel(list) {
let dataTable=[];
list.forEach((item)=>{
dataTable.push({
'名称':item.username,
'号码':item.number,
'班级':item.class,
})
})
var option = {};
option.fileName = "学生信息";
option.datas = [
{
sheetData: dataTable,
sheetName: "sheet",
sheetFilter: ["名称", "号码", "班级"],//可有可无
sheetHeader: ["名称", "号码", "班级"],
},
];
var toExcel = new ExportJsonExcel(option);
toExcel.saveExcel();
},
over 完整代码
<template>
<div>
<button @click="exportData">exportData</button>
</div>
</template>
<script>
import ExportJsonExcel from "js-export-excel";
export default {
data() {
return {
list: [
{
'username': '张三',
'number': '111111111',
'class': '一年级1班',
},
{
'username': '李四',
'number': '2222222',
'class': '二年级2班',
},
{
'username': '王二麻子',
'number': '55555',
'class': '三年级3班1',
},
],
};
},
methods: {
exportData(){
this.exportToExcel(this.list)
},
exportToExcel(list) {
let dataTable=[];
list.forEach((item)=>{
dataTable.push({
'名称':item.username,
'号码':item.number,
'班级':item.class,
})
})
var option = {};
option.fileName = "学生信息";
option.datas = [
{
sheetData: dataTable,
sheetName: "sheet",
sheetFilter: ["名称", "号码", "班级"],
sheetHeader: ["名称", "号码", "班级"],
},
];
var toExcel = new ExportJsonExcel(option);
toExcel.saveExcel();
},
},
};
</script>
掘金又出bug了,上传不了图片,没法看效果图了