前端导出excel插件vue-json-exce

前端导出excel

前端导出excel无需请求接口，需用第三方插件vue-json-exce

一、下载插件

npm install vue-json-excel -S

二、在main.js引入

import JsonExcel from 'vue-json-excel'
Vue.component('downloadExcel', JsonExcel)

三、再需要使用的页面放置导出按钮

<el-button type="success" icon="el-icon-download" :size="size" class="width1" >
        <download-excel :data= "json_data" :fields= "json_fields" name="用户问题" :before-generate= "startDownload" :before-finish = "finishDownload" style="display: inline-block;">导出</download-excel>
</el-button>

json_data代表与要导出的数据，一般为表格数据

json_fields代表表头数据，是一个对象健名代表表头，建值是json_data对应的数据

name为excel的名字

startDownload是一个方法，导出前触发，一般用于导出前判断是否有导出数据

finishDownload是一个方法，导出成功时触发