feat: 添加iframe预览配置

src/components/ShowFile/ShowFile.vue

@@ -658,10 +658,11 @@
       :file="videoPreviewRow"
       :status.sync="videoPreviewVisible"
     ></video-preview>
-    <office-preview
+    <iframe-preview
-      :file="officePreviewRow"
+      :file="iframePreviewRow"
-      :status.sync="officePreviewVisible"
+      :fileHandler="fileHandler"
-    ></office-preview>
+      :status.sync="iframePreviewVisible"
+    ></iframe-preview>
 
     <file-details :audio-cover-url="audioCoverUrl" :image-url="imageUrl" :row-context-data="rowContextData" :visible.sync="drawer"></file-details>
 
@@ -835,7 +836,7 @@ import '@/utils/directives.js'
 
 import fileConfig from '@/utils/file-config'
 import EditElement from '@/views/markdown/EditElement'
-import OfficePreview from '@/components/preview/OfficePreview'
+import IframePreview from '@/components/preview/IframePreview.vue'
 import ShareDialog from '@/components/ShareDialog/index.vue'
 import Clipboard from 'clipboard'
 import TagDialog from '@/components/TagDialog/index.vue'
@@ -847,7 +848,7 @@ export default {
     FileDetails,
     TagDialog,
     ShareDialog,
-    OfficePreview,
+    IframePreview,
     EditElement,
     MessageDialog,
     AudioPreview,
@@ -1107,9 +1108,21 @@ export default {
       imagePreviewVisible: false,
       videoPreviewRow: {},
       videoPreviewVisible: false,
-      officePreviewRow: {},
+      iframePreviewRow: {},
-      officePreviewVisible: false,
+      fileHandler: {},
+      iframePreviewVisible: false,
       audioPreviewRow: {},
+      fileHandlers: {
+        "pdf": {
+          "PDF.js": "https://alist-org.github.io/pdf.js/web/viewer.html?file=$e_url",
+        },
+        "epub": {
+          "EPUB.js": "https://alist-org.github.io/static/epub.js/viewer.html?url=$e_url",
+        },
+        "dwg": {
+          "kkPreview": "http://192.168.0.233:8012/onlinePreview?url=$eb_url",
+        }
+      },
       audioPreviewVisible: false,
       drawer: false,
       rowStyleExecuting: false,
@@ -2519,8 +2532,8 @@ export default {
               case 'docx':
               case 'xlsx':
               case 'pptx':
-                this.officePreviewRow = res.data
+                this.iframePreviewRow = res.data
-                this.officePreviewVisible = true
+                this.iframePreviewVisible = true
                 break
             }
             const that = this
@@ -4234,6 +4247,14 @@ export default {
           this.$emit('selectedFile', selectFile)
           return
         }
+        const fileHandler = this.hasIframePreview(row.suffix, this.fileHandlers)
+        if (fileHandler !== null) {
+          // iframe 预览
+          this.iframePreviewVisible = true
+          this.iframePreviewRow = row
+          this.fileHandler = {}
+          return
+        }
         if (row.contentType.startsWith('image')) {
           // 图片
           this.imagePreviewVisible = true
@@ -4265,13 +4286,11 @@ export default {
           this.openCompressionVisible = true
           return
         }
-        if (
+        if (row.contentType.indexOf('office') > -1 || ['pdf', 'csv', 'drawio', 'mind', 'glb', 'gltf'].includes(row.suffix)) {
-          row.contentType.indexOf('office') > -1 ||
+          // iframe 预览
-          ['pdf', 'csv', 'drawio', 'mind', 'glb', 'gltf', 'glTF'].includes(row.suffix)
+          this.iframePreviewVisible = true
-        ) {
+          this.iframePreviewRow = row
-          // office文件
+          this.fileHandler = {}
-          this.officePreviewVisible = true
-          this.officePreviewRow = row
           return
         }
         if (row.contentType.indexOf('utf-8') > -1) {
@@ -4283,6 +4302,15 @@ export default {
         this.notPreviewDialogVisible = true
       }
     },
+    hasIframePreview(suffix, fileHandlers) {
+      for (let key in fileHandlers) {
+        const extensions = key.split(',')
+        if (extensions.includes(suffix)) {
+          return fileHandlers[key]
+        }
+      }
+      return null
+    },
     determineDownload(file) {
       this.download(file)
       this.notPreviewDialogVisible = false

src/components/office/OnlyOfficeEditor.vue

@@ -103,10 +103,18 @@ export default {
         if (!id) {
           return
         }
-        settingApi.getOfficeConfig().then(res => {
+
-          this.officeServerConfig = res.data
+        if (window.shareId) {
-          this.loadOfficeApi()
+          settingApi.getPublicOfficeConfig({shareId: window.shareId, shareToken: this.$store.getters.shareToken}).then(res => {
-        })
+            this.officeServerConfig = res.data
+            this.loadOfficeApi()
+          })
+        } else {
+          settingApi.getOfficeConfig().then(res => {
+            this.officeServerConfig = res.data
+            this.loadOfficeApi()
+          })
+        }
       },
       immediate: true,
     },

src/components/preview/IframeContentPreview.vue

@@ -0,0 +1,169 @@
+<template>
+  <div>
+    <div class="top-bar">
+      <div class="top-left"></div>
+      <div class="top-center">{{file.name}}</div>
+      <div class="top-right">
+        <div class="top-right-option">
+          <el-select v-if="services.length > 1" size="medium" v-model="url" placeholder="请选择">
+            <el-option
+              v-for="item in services"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value">
+            </el-option>
+          </el-select>
+          <el-button size="medium" type="primary" @click="openUrl"><svg-icon icon-class="wailian"/></el-button>
+        </div>
+      </div>
+    </div>
+    <div class="iframe-content">
+      <iframe ref="iframeContent" name="Iframe Content Preview" :title="file.name" :src="url"></iframe>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: "IframeContentPreview",
+  props: {
+    fileUrl: {
+      type: String,
+      default: ''
+    },
+    file: {
+      type: Object,
+      default: function () {
+        return {}
+      }
+    },
+    fileHandler: {
+      type: Object,
+      default: undefined
+    }
+  },
+  data() {
+    return {
+      url: undefined,
+      services: []
+    }
+  },
+  mounted() {
+    this.iframeLoad()
+  },
+  methods: {
+    iframeLoad() {
+      if (this.fileHandler) {
+        console.log('this.fileHandler', this.fileHandler);
+        for (let service in this.fileHandler) {
+          const urlTemplate = this.fileHandler[service]
+          if (!urlTemplate) {
+            continue
+          }
+          const url = decodeURI(this.fileUrl)
+          if (urlTemplate.indexOf('$e_url') > 0) {
+            this.url = urlTemplate.replace('$e_url', encodeURIComponent(url))
+            this.services.push({label: service, value: this.url})
+          }
+          if (urlTemplate.indexOf('$eb_url') > 0) {
+            this.url = urlTemplate.replace('$eb_url', encodeURIComponent(this.base64EncodeUnicode(url)))
+            this.services.push({label: service, value: this.url})
+          }
+          console.log('services', this.services)
+        }
+      } else {
+        this.url = undefined
+        this.services = []
+      }
+      const iframe = this.$refs.iframeContent;
+      if (iframe.attachEvent) {
+        iframe.attachEvent('onload', () => {
+          this.onReady()
+        })
+      } else {
+        iframe.onload = () => {
+          this.onReady()
+        }
+      }
+    },
+    base64EncodeUnicode(str) {
+      // 首先，将字符串编码为 UTF-8
+      const utf8Bytes = new TextEncoder().encode(str);
+      // 然后，将 Uint8Array 转换为字符串
+      const binaryStr = String.fromCharCode(...utf8Bytes);
+      // 最后，使用 btoa 编码为 Base64
+      return btoa(binaryStr);
+    },
+    onReady() {
+      this.$emit('onReady')
+      // this.url = 'http://192.168.0.233:8012/onlinePreview?url='+encodeURIComponent(this.base64EncodeUnicode('https://cloud.jmal.top/api/file/jmal/tewo/海印缤缤广场/冷机智能控制系统布线图.pdf'))
+      //this.url = 'https://alist-org.github.io/pdf.js/web/viewer.html?file=' + encodeURIComponent('http://localhost:9528/api/file/jmal/jmal/share/滨滨广场冷冻侧采集箱布线图_副本 (1).pdf')
+      if (!this.url) {
+        this.$emit('loadFileFailed')
+      }
+    },
+    openUrl() {
+      window.open(this.url)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.top-bar {
+  width: 100%;
+  position: absolute;
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+  background: #fff;
+}
+.top-left {
+  width: 25%;
+}
+.top-center {
+  width: 50%;
+  text-align: center;
+  align-content: center;
+}
+.top-right {
+  width: 25%;
+  .svg-icon {
+    font-size: 14px;
+  }
+  .top-right-option {
+    float: right;
+    margin-right: 3rem;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    height: 2.5rem;
+    line-height: 2.5rem;
+  }
+  >>> .el-select {
+    width: 135px;
+    margin-right: 10px;
+  }
+}
+.iframe-content {
+  position: absolute;
+  top: 2.5rem;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  iframe {
+    width: 100%;
+    height: 100%;
+    border: 0;
+  }
+}
+</style>

src/components/preview/IframePreview.vue

@@ -16,11 +16,13 @@
             <svg-icon class="preview-close" icon-class="close"/>
           </div>
           <div class="wrapper">
+            <div>{{fileType}}</div>
             <pdf-preview v-if="fileType === 'pdf'" :file="file" :shareId="shareId" :file-url="fileUrl" @onReady="onReady"></pdf-preview>
             <drawio v-else-if="fileType === 'drawio'" v-show="fileReday" :file="file" :shareId="shareId" :read-only="readOnly" @onEdit="onEdit" @onReady="onReady" @onClose="close"></drawio>
             <my-mind-editor v-else-if="fileType === 'mind'" :file="file" :shareId="shareId" :read-only="readOnly" @onEdit="onEdit" @onReady="onReady" @onClose="close"></my-mind-editor>
             <model-preview v-else-if="fileType === 'glTF/GLB'" :file="file" :file-url="fileUrl" :shareId="shareId" @onReady="onReady"></model-preview>
-            <only-office-editor ref="officeEditor" v-else :file="file" :file-url="fileUrl" :shareId="shareId" :sharer="sharer" :read-only="readOnly" @onEdit="onEdit" @manualSave="manualSave" @onClose="close" @onReady="onReady"></only-office-editor>
+            <only-office-editor ref="officeEditor" v-else-if="fileType === 'office'" :file="file" :file-url="fileUrl" :shareId="shareId" :sharer="sharer" :read-only="readOnly" @onEdit="onEdit" @manualSave="manualSave" @onClose="close" @onReady="onReady"></only-office-editor>
+            <iframe-content-preview v-else :file="file" :fileHandler="fileHandler" :file-url="fileUrl" @onReady="onReady" @loadFileFailed="loadFileFailed"></iframe-content-preview>
           </div>
         </div>
     </div>
@@ -32,14 +34,15 @@
 import ModelPreview from '@/components/office/ModelPreview.vue'
 import OnlyOfficeEditor from "@/components/office/OnlyOfficeEditor";
 import MessageDialog from "@/components/message/MessageDialog";
+import IframeContentPreview from '@/components/preview/IframeContentPreview.vue'
 import fileConfig from "@/utils/file-config";
 import PdfPreview from "@/components/office/PdfPreview";
 import Drawio from "@/components/office/Drawio";
 import MyMindEditor from "@/components/Minder/minder"
 
 export default {
-  name: 'OfficePreview',
+  name: 'IframePreview',
-  components: { ModelPreview, Drawio, PdfPreview, MessageDialog, OnlyOfficeEditor, MyMindEditor},
+  components: { IframeContentPreview, ModelPreview, Drawio, PdfPreview, MessageDialog, OnlyOfficeEditor, MyMindEditor},
   props: {
     id: {
       type: String,
@@ -53,6 +56,10 @@ export default {
         return {}
       }
     },
+    fileHandler: {
+      type: Object,
+      default: undefined
+    },
     shareId: {
       type: String,
       default: undefined
@@ -120,6 +127,12 @@ export default {
       }
     },
     getType(suffix) {
+      if (this.fileHandler.length > 0) {
+        return 'other'
+      }
+      if (this.file.contentType.indexOf('office') > -1) {
+        return 'office'
+      }
       switch (suffix) {
         case 'drawio':
           return 'drawio'
@@ -130,8 +143,11 @@ export default {
         case 'gltf':
         case 'glb':
           return 'glTF/GLB'
-        default:
+        case 'office':
+        case 'csv':
           return 'office'
+        default:
+          return 'other'
       }
     },
     /**

src/styles/home-index.scss

@@ -285,7 +285,7 @@
 }
 
 >>> .van-grid {
-  padding: 0;
+  padding-left: 10px;
 }
 
 >>> .van-grid-item__content .svg-icon{

src/views/home/mobile/index.vue

@@ -268,7 +268,7 @@
     <sim-text-preview :file.sync="textPreviewRow" :status.sync="textPreviewVisible"></sim-text-preview>
     <image-viewer :fileList="fileList" :file="imagePreviewRow" :status.sync="imagePreviewVisible"></image-viewer>
     <video-preview :file="videoPreviewRow" :status.sync="videoPreviewVisible"></video-preview>
-    <office-preview :file="officePreviewRow" :status.sync="officePreviewVisible"></office-preview>
+    <iframe-preview :file="officePreviewRow" :status.sync="officePreviewVisible"></iframe-preview>
   </div>
 </template>
 <script>
@@ -283,12 +283,12 @@ import ImageViewer from "@/components/preview/ImageViewer";
 import VideoPreview from "@/components/preview/VideoPreview";
 import SimTextPreview from "@/components/preview/SimTextPreview";
 import {suffix} from "@/utils/file-type";
-import OfficePreview from "@/components/preview/OfficePreview";
+import IframePreview from "@/components/preview/IframePreview.vue";
 import Clipboard from "clipboard";
 
 export default {
   components: {
-    OfficePreview,
+    IframePreview,
     SimTextPreview,
     VideoPreview,
     ImageViewer, IconFile,

src/views/public/share/shareList.vue

@@ -255,7 +255,7 @@
     <image-viewer :fileList="fileList" :shareId="shareId" :file="imagePreviewRow"
                   :status.sync="imagePreviewVisible"></image-viewer>
     <video-preview :file="videoPreviewRow" :shareId="shareId" :status.sync="videoPreviewVisible"></video-preview>
-    <office-preview :file="officePreviewRow" :shareId="shareId" :sharer="sharerUsername" :status.sync="officePreviewVisible"></office-preview>
+    <iframe-preview :file="officePreviewRow" :shareId="shareId" :sharer="sharerUsername" :status.sync="officePreviewVisible"></iframe-preview>
     <el-divider v-if="!linkFailed && !showShareCode" class="grid-divider" content-position="center"><i
       class="el-icon-folder-opened"></i>&nbsp;{{ summaries }}
     </el-divider>
@@ -290,7 +290,7 @@ import VideoPreview from "@/components/preview/VideoPreview";
 import AudioPreview from "@/components/preview/AudioPreview";
 import fileConfig from "@/utils/file-config";
 import Clipboard from "clipboard";
-import OfficePreview from "@/components/preview/OfficePreview";
+import IframePreview from "@/components/preview/IframePreview.vue";
 import Logo from "@/components/Logo";
 import store from "@/store";
 import FileTree from "@/components/FileTree";
@@ -299,7 +299,7 @@ export default {
   components: {
     FileTree,
     Logo,
-    OfficePreview, IconFile, BreadcrumbFilePath, AlLoading,
+    IframePreview, IconFile, BreadcrumbFilePath, AlLoading,
     AudioPreview, VideoPreview, ImageViewer, SimTextPreview
   },
   data() {