test-web/src/components/exportTable/exportTable.vue

<template>
  <div class="app-content">
    <el-button ref="hwcell" size="small" type="primary" @click="exportExcel"  v-if="isShow">文件导出</el-button>
    <el-table :data="tableData" style="width: 100%" border>
      <el-table-column type="index" label="序号" width="60" />
      <el-table-column prop="etcCardNumber" label="ETC卡号" width="145" />
      <el-table-column prop="licensePlateNumber" label="车牌号" width="100" />
      <el-table-column prop="consumptionType" label="消费类型" width="90" />
      <el-table-column prop="entranceTime" label="入口时间" width="110" />
      <el-table-column prop="entryStationName" label="入口站名" width="110" />
      <el-table-column prop="exportTime" label="出口时间" width="110" />
      <el-table-column prop="exitStationName" label="出口站名" width="110" />
      <el-table-column prop="balanceBeforeTransaction" label="交易前余额（元）" width="140" />
      <el-table-column prop="transactionAmount" label="交易金额（元）" width="125" />
      <el-table-column prop="postransactionalance" label="交易后余额（元）" width="140" />
    </el-table>
  </div>
</template>

<script>

import * as XLSX from "xlsx";
export default {
  data() {
    return {
    isShow:false,
    fileData: "" ,// 保存选择的文件数据,
     tableData:[
  {
    etcCardNumber: '52011328220200481698',
    licensePlateNumber: '贵A710AE',
    consumptionType: '省内流水',
    entranceTime: '2019-12-27 20:14:02',
    entryStationName: '贵阳西主线站',
    exportTime: '2019-12-27 20:18:20',
    exitStationName: '贵阳西主线站',
    balanceBeforeTransaction: '38.25',
    transactionAmount: '0.00',
    postransactionalance: '38.25',
  },
  {
    etcCardNumber: '52011328220200481698',
    licensePlateNumber: '贵A710AE',
    consumptionType: '省内流水',
    entranceTime: '2019-12-27 20:14:02',
    entryStationName: '贵阳西主线站',
    exportTime: '2019-12-27 20:18:20',
    exitStationName: '贵阳西主线站',
    balanceBeforeTransaction: '38.25',
    transactionAmount: '0.00',
    postransactionalance: '38.25',
  },
  {
    etcCardNumber: '52011328220200481698',
    licensePlateNumber: '贵A710AE',
    consumptionType: '省内流水',
    entranceTime: '2019-12-27 20:14:02',
    entryStationName: '贵阳西主线站',
    exportTime: '2019-12-27 20:18:20',
    exitStationName: '贵阳西主线站',
    balanceBeforeTransaction: '38.25',
    transactionAmount: '0.00',
    postransactionalance: '38.25',
  },
  {
    etcCardNumber: '52011328220200481698',
    licensePlateNumber: '贵A710AE',
    consumptionType: '省内流水',
    entranceTime: '2019-12-27 20:14:02',
    entryStationName: '贵阳西主线站',
    exportTime: '2019-12-27 20:18:20',
    exitStationName: '贵阳西主线站',
    balanceBeforeTransaction: '38.25',
    transactionAmount: '0.00',
    postransactionalance: '38.25',
  },
  {
    etcCardNumber: '52011328220200481698',
    licensePlateNumber: '贵A710AE',
    consumptionType: '省内流水',
    entranceTime: '2019-12-27 20:14:02',
    entryStationName: '贵阳西主线站',
    exportTime: '2019-12-27 20:18:20',
    exitStationName: '贵阳西主线站',
    balanceBeforeTransaction: '38.25',
    transactionAmount: '0.00',
    postransactionalance: '38.25',
  },
  {
    etcCardNumber: '52011328220200481698',
    licensePlateNumber: '贵A710AE',
    consumptionType: '省内流水',
    entranceTime: '2019-12-27 20:14:02',
    entryStationName: '贵阳西主线站',
    exportTime: '2019-12-27 20:18:20',
    exitStationName: '贵阳西主线站',
    balanceBeforeTransaction: '38.25',
    transactionAmount: '0.00',
    postransactionalance: '38.25',
  },
]
    };
  },
  create() {
    console.log(XLSX);
  }, 


  methods: {
    
   
    //导出文件
    exportExcel() {
      if (!this.tableData.length) {
        this.$message.warning("暂无数据导出");
        return false;
      }
      import("@/utils/Export2Excel").then(excel => {
        //导出表格头部内容（要与下面字段对照）
        const tHeader = ['ETC卡号', '车牌号', '消费类型', '入口时间', '入口站名', '出口时间', '出口站名', '交易前余额（元）', '交易金额（元）', '交易后金额（元）'];
        const filterVal = [ "etcCardNumber", "licensePlateNumber", "consumptionType", "entranceTime", "entryStationName", "exportTime", "exitStationName", "balanceBeforeTransaction", "transactionAmount", "postransactionalance"];
        const data = this.formatJson(filterVal);
        //保存excel
        excel.export_json_to_excel({
          header: tHeader,
          data,
          //导出的文件名
          filename: "通行流水数据表"
        });
      });

    },

    //格式转换
    formatJson(filterVal) {
      return this.tableData.map(v =>
        // obj = {
        //   name:'',
        //   age:''
        // }
        filterVal.map(j => {
          // obj[name]
          // obj[age]
          console.log(v[j]);
          return v[j];
        })
      );
      // [[name,age],[name,age],[name,age]]
    },
    
 
  }
};
</script>

<style>
</style>