Vue+element实现表格数据的导出

1,694 阅读1分钟

1.安装依赖

npm install --save xlsx file-saver

2.在相应的组件中使用

<script>
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
</script>

3.添加导出按钮,写导出方法

其中用到两个el-table,是因为:第一个表格是页面上的表格数据,第二个是要导出的表格数据(因为页面上的数据进行了分页,导出的数据是接口返回的所有的数据,因此再写一个专门用来导出的表格数据)

<template>
  <el-form-item>
    <el-button type="success" v-auth="['patrolMoreRecord:export']" icon="el-icon-upload2" @click="exportExcel">导出</el-button>
  </el-form-item>
  <el-table 
      :data="list" 
      border 
      style="width:100%"
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(210,210,210,0.8)">
        <el-table-column prop="routeName" label="姓名"></el-table-column>
        <el-table-column prop="unitName" label="性别"></el-table-column>
        <el-table-column prop="taskEndTime" label="年龄"></el-table-column>
      </el-table>
      <el-table 
        id='out_table'
        :data="exportList"
        style="display:none"
        >
        <el-table-column prop="routeName" label="姓名"></el-table-column>
        <el-table-column prop="unitName" label="性别"></el-table-column>
        <el-table-column prop="taskEndTime" label="年龄"></el-table-column>
      </el-table>
</template>

<script>
import FileSaver from 'file-saver'
import XLSX from 'xlsx'

export default {
  data() {
    return {
      loading:true,
      list: [],
      exportList:[],
      queryInfo: {
        // 查询参数
        obj:{
          startDate:'',
          endDate:'',
          unitName:'',
          unitId: '',
          status: ''
        },
        // 当前的页数
        pageCurrent: 1,
        // 当前每页显示多少条数据
        pageSize: 10
      },
    }
  },
  methods: {
    // 导出数据
    exportExcel(){
      var vm = this
      this.$confirm('此操作将导出excel文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
      }).then(() => {
        vm.queryInfo.pageSize = 10000000
        vm.$api.PatrolRecord(vm.queryInfo,function (data) {
          vm.exportList = data.list
        });
        setTimeout(()=>{
          vm.exportData()
        },500)
      }).catch(() => {});
    },
    exportData(){
     var vm=this
     var xlsxParam = { raw: true }
     var wb = XLSX.utils.table_to_book(document.querySelector("#out_table"),xlsxParam);
      var wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array"
      });
      try {
        FileSaver.saveAs(
          new Blob([wbout], { type: "application/octet-stream" }),
          '数据导出' + ".xlsx"
        );
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbout);
      }
      return wbout;
   },
  }
}
</script>