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 的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>

代码调用

<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>

原文地址：https://blog.csdn.net/weixin_43474476/article/details/144403513

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！