写在前面
今天更新一片老生常谈的功能，导出数据到excel表格中，照例我还是会将源码放到这里gaojizu，感兴趣或者需要的可以直接clone就可以了！
效果预览
导出成功
在这里插入图片描述
导出的EXCEL
在这里插入图片描述
源码：
<template>
<div>
<el-button id="btn" type="primary" icon="el-icon-download" @click="handleDownload">导出EXCEL</el-button>
<el-table :data="studentList" border stripe style="width: 100%;margin-top: 20px">
<el-table-column prop="id" label="ID"></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="sex" label="性别"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column prop="address" label="住址"></el-table-column>
</el-table>
</div>
</template>
<script>
export default {
name: "exportExcel",
data() {
return {
studentList: [],
temp_list: []
}
},
created() {
this.getStudents()
},
methods: {
getStudents() {
this.$axios.get("api/getStudents.do").then(res => {
this.studentList = res.data.data.list
console.info(res)
})
},
handleDownload() {
const loading = this.$loading({
lock: true,
text: '导出中,请稍后......',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
})
//这里是过滤条件，自己根据需要进行使用
let query_params = {
'search': null,
"page": null,
'page_size': null
}
this.$axios.get("api/getStudents.do").then(response => {
this.temp_list = response.data.data.list
import('@/vendor/Export2Excel').then(excel => {
const tHeader = ['Id', '姓名', '性别', '年龄', '住址']
const filterVal = ['id', 'name', 'sex', 'age', 'address']
if (this.temp_list) {
const data = this.formatJson(filterVal, this.temp_list)
excel.export_json_to_excel({
header: tHeader,
data,
filename: '学生表'
})
} else {
this.$notify({
title: 'Failure',
message: "未能获取到任何数据",
type: 'error',
})
}
loading.close()
this.$notify({
title: '成功',
message: '成功导出' + this.temp_list.length + '条数据',
type: 'success'
});
this.temp_list = null
})
})
},
/**
* @function formatJson 格式化
* @param filterVal
* @param jsonData
* @returns {*}
*/
formatJson(filterVal, jsonData) {
return jsonData.map(v => filterVal.map(j => {
if (j === 'timestamp') {
return parseTime(v[j])
} else {
return v[j]
}
}))
},
}
}
</script>
<style scoped>
#btn {
float: left;
margin: 10px 10px 10px 10px;
}
</style>这里因为没有后端的接口，我使用的是mockjs模拟的接口，接口具体数据是这样的，什么你问我mockjs怎么用的？额…我没写过相关的文章吗？下次抽时间写一下吧！
接口返回数据格式
/**
* 模拟接口返回的数据
* @type {*[]}
*/
let lists = []
for (let i = 0; i < 100; i++) {
lists.push({"id": + i, "name": "name" + i, "sex": 'sex' + i, "age": 'age' + i, "address": 'address' + i})
}
console.info(lists)
const studentLists = {
"code": 20000,
"message": "success",
"data": {
"list": lists
}
}
export default studentLists具体的目录结构，怎么使用可以直接下载github里面的源码进行使用，这里简单的说一下需要安装的两个插件
在这里插入图片描述
知道你们懒，所以这两句命令是：
npm install -S file-saver xlsx
npm install -D script-loaderPS：如果最后你们使用的时候，效果和我的不一样，那么需要反思一下了，为什么不一样，是不是js文件没有导入呢？如果你下载了我的git上面的代码就不会有问题，因为我直接引入了那两个文件，就是这两个文件
在这里插入图片描述