Vue实现excel文件下载
Vue实现excel文件下载话不多说,直接上代码1、安装插件cnpm install vue-json-excel2、导出按钮<!--导出用户信息excel表格--><download-excelclass = "export-excel-wrapper":data = "json_data":fields = "json_fields"name = "用户信息列表.xls"&g
·
Vue实现excel文件下载
话不多说,直接上代码
1、安装插件
cnpm install vue-json-excel
2、main.js里面引入
import JsonExcel from 'vue-json-excel'
Vue.component('downloadExcel', JsonExcel)
3、导出按钮
<!--导出用户信息excel表格-->
<download-excel
class = "export-excel-wrapper"
:data = "json_data"
:fields = "json_fields"
name = "用户信息列表.xls">
<el-button type="primary" size="small">导出EXCEL</el-button>
</download-excel>
4、data区写想要导出的字段以及导出的数据(数据写死测试,后续可调接口进行传值)
//导出excel
json_fields: {
"姓名": "name", //常规字段
"用户名":"username",
"所属组织":"organization",
"权限":"auth",
},
json_data: [
//写死,后续可通过接口进行传值
{
name:'汤姆',
username:'admin1',
organization:'地球村',
auth:'超级管理员'
},
{
name:'杰米',
username:'admin2',
organization:'地球村',
auth:'超级管理员'
}
],
json_meta: [
[
{
" key ": " charset ",
" value ": " utf- 8 "
}
]
]
5、点击下载按钮
5、excel下载成功
*
兄弟萌,赶快试试吧
更多推荐
已为社区贡献15条内容
所有评论(0)