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

安装依赖包

bash 复制代码

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

创建export-excel.vue组件

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

javascript 复制代码

<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 的UI
       this.$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() {},
     // });
    },
    // 数据写入excel
    export2Excel() {
      var that = this
      require.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.excelData
      for (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>

代码调用

javascript 复制代码

<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.list
				this.excelName=this.params.fild  //表名根据自己需求，非固定写法
			})
		}
		}
}

</script>