之前使用过file-saver等插件导出过表格,最近发现使用vue-json-excel插件比较简单。
包链接:vue-json-excel - npm 可查看导出插件的各种属性
一.安装vue-json-excel
npm install vue-json-excel -S
二.main.js里引入并注册使用
import JsonExcel from 'vue-json-excel'
Vue.component('downloadExcel', JsonExcel)
三.在页面中使用
<download-excel
class = "export-excel-wrapper"
:data = "json_data" //导出数据
:fields = "json_fields" //表头
title="登记表" //标题
name = "登记表.xls">
<el-button type="primary" size="small">导出EXCEL</el-button>
</download-excel>
data(){
return{
json_data:[
{
Name:"张三",
China:"90",
Math:"93",
English:"88"
},
{
Name:"李四",
China:"94",
Math:"92",
English:"86"
}
],
json_fields:{
"姓名":"Name",
"语文":"China",
"数学":"Math",
"英语":"English",
}
}
}