文件预览

(cherry picked from commit 685a8b39f6e325c3db641ea61f90854a2b2cd29c)

src/common/lang/en-us.js

@@ -4,7 +4,8 @@ module.exports = {
   pageTitle: {
     home: 'home',
     myTodo: 'My To Do',
-    search: 'search'
+    search: 'search',
+    filePreview: 'File Preview'
   },
   back: 'back',
   chinese: 'chinese',

src/common/lang/zh-cn.js

@@ -4,7 +4,8 @@ module.exports = {
   pageTitle: {
     home: '首页',
     myTodo: '我的待办',
-    search: '标准检索'
+    search: '标准检索',
+    filePreview: '文件预览'
   },
   back: '返回',
   chinese: '中',

src/router/index.js

@@ -24,6 +24,16 @@ const routes = [
       hasBack: true
     }
   },
+  {
+    path: '/filePreview',
+    name: 'filePreview',
+    component: () => import('@/views/FilePreview/FilePreview'),
+    meta: {
+      hasNavBar: true,
+      pageTitle: 'filePreview',
+      hasBack: true
+    }
+  },
   {
     path: '/',
     name: 'home',

src/views/FilePreview/FilePreview.vue

@@ -0,0 +1,49 @@
+<template>
+<!--  <div class="iframe-container">-->
+    <iframe :src="previewUrl" class="responsive-iframe" frameborder="0"></iframe>
+<!--  </div>-->
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      previewUrl: ''
+    }
+  },
+  mounted () {
+    console.log('file preview mounted')
+    this.previewUrl = this.$route.query.previewUrl
+    console.log('this.previewUrl1', this.previewUrl)
+    console.log('process.env.BASE_URL', process.env.BASE_URL)
+    if (this.previewUrl.startsWith('/')) { // pdf的 url特殊处理下
+      const index = this.previewUrl.indexOf('file=')
+      const firstPart = this.previewUrl.substring(0, index)
+      const secondPart = this.previewUrl.substring(index + 5)
+      this.previewUrl = 'http://' + window.location.host + firstPart + encodeURIComponent(secondPart)
+      // this.previewUrl = 'http://' + window.location.host + encodeURIComponent(this.previewUrl)
+      // window.open(this.previewUrl)
+    }
+    console.log('this.previewUrl2', this.previewUrl)
+
+    // console.log('this.$route', this.$route)
+    // console.log('window.location.host', window.location.host)
+  }
+}
+</script>
+<style>
+.iframe-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100vh;
+  -webkit-overflow-scrolling: touch; /* 当手指从触摸屏上移开，会保持一段时间的滚动 */
+  overflow-y: scroll;
+}
+
+.responsive-iframe {
+  width: 100%;
+  height: 100%;
+}
+</style>

src/views/search/generalSearch.vue

@@ -8,6 +8,7 @@
           <form action="/">
             <van-search
               clearable
+              clear-trigger="always"
               v-model="searchValue"
               :placeholder="$t('pleaseEnter')+$t('dashboard.generalSearch.queryCondition')"
               @search="onInputSearch"
@@ -167,7 +168,7 @@ import {
 } from '@/api/enterpriseStandardLibraryApi'
 import Vue from 'vue'
 import { previewPdf } from '@/utils/previewPdf'
-import { kkFilePreview } from '@/utils/kkFilePreview'
+import { dealUrl } from '@/utils/kkFilePreview'
 import { ACCESS_TOKEN } from '@/store/mutation-types'
 import { getFileInfo } from '@/api/api'
 
@@ -646,23 +647,24 @@ export default {
       }
       console.log('seletedFile', file)
 
-      // 是onlyOffice生成的，预览关联的pdf文件
-      if (file.pdfId) {
-        // 说明是onlyOffice生成的
-        const url = previewPdf(file.pdfId)
-        window.open(url)
-        return
-      }
-
       // 预览选择的文件
-      const fileFullUrl = `${window._CONFIG.domianWebSocketURL}/sys/common/view/${file.id}?at=${Vue.ls.get(ACCESS_TOKEN)}&fullfilename=${file.name}`
+      let url = ''
-      console.log(fileFullUrl)
+      // 是onlyOffice生成的，预览关联的pdf文件
-      if (file.suffix === 'pdf') { // pdf预览
+      if (file.pdfId) { // 说明是onlyOffice生成的
-        const url = previewPdf(file.id)
+        console.log('是onlyOffice生成的pdf')
-        window.open(url)
+        url = previewPdf(file.pdfId)
-        return
+      } else if (file.suffix === 'pdf') {
+        console.log('是其他的pdf')
+        url = previewPdf(file.id)
+      } else { // 其余可预览文件仍使用KKFile进行预览
+        console.log('其余可预览文件仍使用KKFile进行预览')
+        const fileFullUrl = `${window._CONFIG.domianWebSocketURL}/sys/common/view/${file.id}?at=${Vue.ls.get(ACCESS_TOKEN)}&fullfilename=${file.name}`
+        console.log('fileFullUrl', fileFullUrl)
+        url = dealUrl(fileFullUrl)
       }
-      kkFilePreview(fileFullUrl)// 其余可预览文件仍使用KKFile进行预览
+      console.log('url', url)
+      // window.open(url)
+      this.$router.push(`/filePreview?previewUrl=${url}`)
     },
     /**
      *  从文件列表里选择最新文件
@@ -792,9 +794,11 @@ export default {
     height: auto;
     line-height: 38px;
     display: flex;
+    margin-top: 10px;
+    background: #F8F8F8;
   }
   .label-col {
-    width: 110px;
+    //width: 110px;
     text-align: left;
     color: #86909c;
   }