# vue-json-excel模块使用
1.安装
npm install vue-json-excel
2.项目工程中添加如下代码
import Vue from "vue";
import JsonExcel from "vue-json-excel";
Vue.component("downloadExcel", JsonExcel); //全局注册组建
3.组建使用和说明
<download-excel
:data="dataList"
:fetch="fetchData"
worksheet="My Worksheet"
name="filename.xls"
:before-generate = "startDownload"
:before-finish = "finishDownload"
>
<el-button type="primary" size="mini">导出EXCEL</el-button>
</download-excel>
参数说明:
:data="dataList" //需要导出的json数据[{..},{...},...]
:fetch="fetchData" //在点击下载按钮后,开始下载之前执行的函数,通过请求获取的数据
:fields="json_fields" //没有配置则全部json内容导出,有配置则按照fileds内容导出
worksheet="My Worksheet" //工作表选项卡的名称。
name="filename.xls" //导出的文件名字
:before-generate = "startDownload" //在生成/获取数据之前调用方法,例如:显示加载进度
:before-finish = "finishDownload" //在下载框弹出之前调用方法的回调,例如:隐藏加载进度
data:{
json_fields:{
'excel的A列显示的名称':'A',
'excel的B列显示的名称':'B',
}
}
methods:{
fetchData(){
.....
return obj //固定的格式
},
startDownload() {
console.log("数据开始") //一般设置遮罩层,开始下载文件之前执行
},
finishDownload() {
console.log("数据下载完成") //去除遮罩层,在下载文件之前执行
}
}
← nginx部署VUE项目 常规账密登陆流程 →