目前大多数采取的都是 xlsx ，我这里使用的是vue-json-excel，相对来说更容易上手实现效果。
安装依赖
npm install vue-json-excel全局引用
在项目的 main.js 文件中引入
import JsonExcel from 'vue-json-excel'
Vue.component('downloadExcel', JsonExcel)进行使用
按钮可以根据自己要求进行样式调节
<download-excel class = "export-excel-wrapper":data = "excelpage"
:fields = "json_fields" name = "filename.xls">
<a-button type="primary" icon="download" > Download </a-button>
</download-excel>数据部分，我这里是直接用的接口数据（返回的数json形式数据），存放在excelpage[ ]中，数据展示：
js代码：
<script>
export default {
data () {
return {
excelpage:[], // 存放用于导出excel的数据
json_fields: {
学号: "student_id", //常规字段
姓名: "student_name", //支持嵌套属性
专业班级: "student_majorclass",
成绩: "student_score",
特长: "specialty",
一轮笔试: "firstexam_score",
一轮状态: "first_ispass",
一轮面试:"interview_score",
一面状态:"interview",
二轮面试:"secondinterview_score",
二面状态:"secondinterview"
},
json_meta: [
[
{
" key ": " charset ",
" value ": " utf- 8 "
}
]
]
}
},
</script>最后点击下载按钮，浏览器会弹出文件下载
效果图：
关于依赖的更多内容移步官方文档 —> 点我跳转
有问题欢迎讨论留言呀！
