FE_python_trial/src/views/Preview.vue

<template>
    <div class="wrap">
      <div class="inner">
      <el-page-header @back="$router.back()" content="excel预览" style="margin-bottom: 20px"></el-page-header>
        <el-table :data="list" class="cus-table" ref="table" stripe header-align="center" v-loading="loading" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="80" align="center"></el-table-column>
            <el-table-column type="index" label="序号" width="55" align="center"></el-table-column>
            <el-table-column v-for="(item,index) in list[0]" :prop="index" :key="index" :label="index" align="center"></el-table-column>
        </el-table>
      </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
          path: this.$route.query.path,
          loading: false,
          list: [],
          multipleSelection: []
        };
    },
    mounted(){
      this.getData()
    },
    methods: {
      // 获取列表
      getData() {
        this.loading = true
        this.$post(`${this.api.lookExcel}?excelUrl=${this.path}`).then(res => {
          const { data } = res
          if (data.length) {
            const result = []
            // 如果每个字段都是空，则不显示该行
            data.map(e => {
              let valid = false
              for (const i in e) {
                if (e[i]) {
                  valid = true
                  break
                }
              }
              valid && result.push(e)
            })
            this.list = result
            this.loading = false
          }
        }).catch(res => {
          this.loading = false
          // 后端读取失败，就直接打开该excel，并返回我的数据列表
          window.open('https://view.officeapps.live.com/op/view.aspx?src=' + this.path)
          this.$router.back()
        })
      },
      handleSelectionChange(val) {
        this.multipleSelection = val
      }
    }
};
</script>
<style lang="scss" scoped>
.wrap {
  padding: 20px;
  background-color: #f3f6fa;
  .inner {
    padding: 15px;
    background-color: #fff;
    border-radius: 4px;
  }
  .tool {
    display: flex;
    justify-content: space-between;
    margin: 20px 0;
  }
  .action {
    display: inline-flex;
  }
  .copy {
    margin-left: 5px;
    cursor: pointer;
  }
}
</style>