excel预览

src/api/index.js

@@ -16,6 +16,7 @@ export default {
     checkIsShowBySystemId: `nakadai/model/reference/checkIsShowBySystemId`,
     fileUpload: `${config.host}nakadai/nakadai/oss/fileUpload`,
     importData: `occupationlab/python/file/data/importData`,
+    lookExcel: `occupationlab/python/file/data/lookExcel`,
     lookOver: `occupationlab/python/file/data/lookOver`,
     batchDeletion: `occupationlab/python/file/data/batchDeletion`,
     myData: `occupationlab/python/file/data/myData`

src/config/index.js

@@ -4,7 +4,7 @@ const isHh = location.host.includes('10.196.131.73') //是否是河海版本
 const isBeta = process.env.NODE_ENV === 'development' || location.host.includes('39.108.250.202') //是否是职站测试
 
 let host = location.origin + ':9000/'
-if (process.env.NODE_ENV === 'development') host = 'http://39.108.250.202:9000/'
+if (process.env.NODE_ENV === 'development') host = 'http://192.168.31.151:9000/'
 const systemId = util.getCookie('systemId')
 /**
  * python8个系统的id和名称

src/router/index.js

@@ -16,6 +16,13 @@ const routes = [{
     meta: {
       title: '我的数据'
     },
+  },
+  {
+    path: '/preview',
+    component: resolve => require(['../views/Preview'], resolve),
+    meta: {
+      title: 'excel预览'
+    },
   }
 ];
 

src/util/index.js

@@ -44,6 +44,16 @@ export default {
         if ("mp4,3gp,mov,m4v,avi,dat,mkv,flv,vob,rmvb,rm,qlv".includes(ext)) return true;
         return false;
     },
+    // 传入文件后缀判断是否是图片
+    isImg(ext) {
+        if ("jpg,jpeg,png,gif,svg,psd".includes(ext)) return true;
+        return false;
+    },
+    // 传入文件后缀判断是否是pdf以外的文档
+    isDoc(ext) {
+      if ("xls,xlsx,doc,docx,pdf,ppt,pptx".includes(ext)) return true;
+        return false;
+    },
     // 下载文件
     downloadFile(fileName,url) {
         var x = new XMLHttpRequest()

src/views/Data.vue

@@ -136,7 +136,13 @@ export default {
       },
       // 查看
       show(row) {
-        window.open(row.filePath)
+        // 如果是word,pdf,excel，就用预览插件打开，图片等就直接打开
+        const format = row.fileFormat
+        if ('xls,xlsx'.includes(format)) {
+          this.$router.push(`/preview?path=${row.filePath}`)
+        } else {
+          window.open((util.isDoc(format) ? 'https://view.officeapps.live.com/op/view.aspx?src=' : '') + row.filePath)
+        }
       },
       // 下载
       download(row) {

src/views/Preview.vue

@@ -0,0 +1,114 @@
+<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="table" ref="table" stripe header-align="center" @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,
+          thead: [],
+          list: [],
+          multipleSelection: []
+        };
+    },
+    mounted(){
+      this.getData()
+    },
+    methods: {
+      // 获取列表
+      getData() {
+        this.$post(`${this.api.lookExcel}?excelUrl=${this.path}`).then(res => {
+          const { data } = res
+          const thead = []
+          if (data.length) {
+            const item = data[0]
+            for (const i in item) {
+              i && thead.push(i)
+            }
+            const result = []
+            data.map(e => {
+              let valid = false
+              for (const i in e) {
+                if (e[i]) {
+                  valid = true
+                  break
+                }
+              }
+              valid && result.push(e)
+            })
+            this.thead = thead
+            this.list = result
+          }
+          
+        }).catch(res => {
+          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;
+  }
+  /deep/.el-table {
+    .el-table__cell {
+      padding: 10px 0;
+    }
+    th.el-table__cell {
+      & > .cell {
+        color: #fff;
+      }
+    }
+  }
+  .copy {
+    margin-left: 5px;
+    cursor: pointer;
+  }
+  .pagination {
+    margin: 20px 0;
+    text-align: center;
+    button,.number,.more,.el-input__inner{
+      min-width: 32px !important;
+      height: 32px !important;
+      line-height: 32px;
+      color: #333 !important;
+      background-color: transparent !important;
+      border: 1px solid #ccc !important;
+      border-radius: 2px !important;
+    }
+    button i{
+      color: #333;
+    }
+    .active{
+      color: #fff !important;
+    }
+  }
+}
+</style>