Vue导出报表功能【动态表头+动态列】

安装依赖包

npm install -S file-saver
npm install -S xlsx
npm install -D script-loader

创建export-excel.vue组件

代码内容如下（以element-ui样式代码示例）：

<template><el-button type="primary" @click="ExportTable" plain>导出数据</el-button>
</template>
<script >
export default {data(){return{excelData:[],      }},props:{selectData: {type: Array,default: function(){return [];}},header: {type: Array,default: function(){return [];}},filterVal: {type: Array,default: function(){return [];}},excelName: {type: String,default: "",}},methods:{
// 列表选中数据下载 ！！！有选中需求就写，没选中框就不写，非必要判断ExportTable() {if (this.selectData.length === 0) {this.$message({message: '要导出的数据为空',type: 'warning'});return;}//element 的UIthis.$confirm('确定下载列表文件?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning',}).then(() => {this.excelData = this.selectData // selectData是一个数组，存储表格中选择的行的数据。this.export2Excel()}).catch(() => {})// let that = this;// this.$confirm({//  title: '提示',//  content: '确定下载列表文件?',//  onOk() {//  that.excelData = that.selectData // selectData是一个数组，存储表格中选择的行的数据。//    that.export2Excel();// },//  onCancel() {},// });},// 数据写入excelexport2Excel() {var that = thisrequire.ensure([], () => {const { export_json_to_excel } = require('@/components/excel/Export2Excel') // 这里必须使用绝对路径，使用@/+存放export2Excel的路径,安装完依赖包会自动出现这个js，没有的话检查下安装的依赖是否成功const list = that.excelDataFormat(that.excelData)const data = that.formatJson(that.filterVal, list)export_json_to_excel(that.header, data, that.getExcelName()) // 导出的表格名称，根据需要自己命名})// this.$emit('clearSelection');},// 格式转换，直接复制即可formatJson(filterVal, jsonData) {return jsonData.map((v) => filterVal.map((j) => v[j]))},// 导出excel数据预处理excelDataFormat() {let list = this.excelDatafor (var i = 0; i < list.length; i++) {list[i].createTime = this.timeChange(list[i].createTime)list[i].lastLoginTime = this.timeChange(list[i].lastLoginTime)}return list},// excel文档名生成 取时间getExcelName() {let dt = new Date()return this.excelName + dt.toLocaleString()},// 时间格式转化timeChange(originVal) {const dt = new Date(originVal)const y = dt.getFullYear()const m = (dt.getMonth() + 1 + '').padStart(2, '0')const d = (dt.getDate() + '').padStart(2, '0')const hh = (dt.getHours() + '').padStart(2, '0')const mm = (dt.getMinutes() + '').padStart(2, '0')const ss = (dt.getSeconds() + '').padStart(2, '0')return `${y}-${m}-${d} ${hh}:${mm}:${ss}`},      }
}
</script>
<style scoped></style>

代码调用

<el-form ref="params" :model="params"><ExportExcel:selecData="allData":header="excelHeader":filterVal="excelColumnName":excelName="excelName"></ExportExcel>
</el-form><script>
import ExportExcel from '../../excel/export-excel' //export-excel组件代码存放路径
export default{data(){//字段定义tableColumns:[],ListAll:[],title:[],allData:[],//定义导出报表需要的数据，表头，列及表名excelHeader:[],excelColumnName:[],excelName:""},methods:{getData(){const columnHeader = {}//如果有固定字段可以在这里先赋值columnHeader['字段名'] = {prop:`字段名`,label:`字段描述`}this.$api.queryList(this.params).then((res)=>{//这里的取值根据自己的返回结果来this.ListAll = res.data.list //数据//这里是把字段名，单独拆开了，title只传的列名,//后端数据格式为HashMap，例{key:value,字段1:描述1,字段2:描述2,字段3:描述3....}this.title=res.title for(let key in this.title){let value=this.title[key]columnHeader[key]={prop:`${key}`,label:`${value}`}//这里根据我的需求，列名是动态的，在这里直接赋值this.excelColumnName.push(key)this.excelHeader.push(value)//中文描述，这些都是后端处理过的}this.tableColumns = columnHeader//完成，list不用做处理了，在el-table赋值就可以了this.allData = res.data.listthis.excelName=this.params.fild  //表名根据自己需求，非固定写法})}}
}</script>