Vue导出内容到excal

1.安装第三方插件JsonExcel

npm install vue-json-excel

2.在main.js中引入插件

import Vue from "vue"; 

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

3.使用（例如导出el-table中数据）

其中 :data="tableData"导出表格内的动态数据， :fields="tableHead"表示要导出的JSON对象中的字段（如果没有提供，JSON中的所有属性将被导出）

<el-table :data="tableData" border style="width:100%" v-loading="loading"@selection-change="handlerSelectionChange">
    <el-table-column prop="projectName" label="项目名称" align="center"></el-table-column>
    <el-table-column prop="deptName" label="需求部门" align="center"></el-table-column>
    <el-table-column prop="proposerName" label="申请人" align="center"></el-table-column>
</el-table>

<el-button type="primary">
    <download-excel :data="tableData" :fields="tableHead" name="生产费用管理">导出</download-excel>
</el-button>

export default{
    data(){
        tableHead: {
            需求部门: "deptName",          //AA:"BB" ，AA为导出时的th、BB为绑定的动态内容
            项目名称: "projectName",
            申请人: "proposerName",
          },
        tableData:{}
    }
}

4.常用API参数列表

参数名	参数类型	描述	默认值
data	Array	需要导出的数据
fields	Object	要导出的JSON对象中的字段，如果没有提供，JSON中的所有属性将被导出
type	string	文件类型 xls或者csv	xls
name	string	导出的文件名称	data.xls
worksheet	string	工作表选项卡的名称	'Sheet1'
header	string/Array	表格的标题。可以是字符串（一个标题）或字符串数组（多个标题）。
footer	string/Array	表格的页脚。可以是字符串（一个页脚）或字符串数组（多个页脚）
before-generate	Function	在生成/获取数据之前调用方法，例如:显示加载进度
before-finish	Function	在下载框弹出之前调用方法的回调，例如:隐藏加载进度

5.对于 before-generate before-finish API的使用

<el-button type="primary">
    <download-excel :data="tableData" :fields="tableHead" name="生产费用管理"
     :before-generate="beforeGenerate" :before-finish='beforeFinish'
    >导出</download-excel>

methods:{
    beforeGenerate() { console.log('开始获取数据0%'); 
    beforeFinish() { console.log('数据获取完成100%，弹出下载框'); 
}