From 79ee7ef318e2a456f6d2eac914f00d06340214c2 Mon Sep 17 00:00:00 2001
From: jmal <zhushilun084@gmail.com>
Date: Wed, 27 Nov 2024 15:09:32 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BB=A5=E4=B8=8B=E6=96=87=E4=BB=B6?=
 =?UTF-8?q?=E6=A0=BC=E5=BC=8F=E5=8F=AF=E4=BB=A5=E4=BD=BF=E7=94=A8OnlyOffic?=
 =?UTF-8?q?e=E6=89=93=E5=BC=80=EF=BC=9A=20'doc',=20'docx',=20'odt',=20'rtf?=
 =?UTF-8?q?',=20'xls',=20'xlsx',=20'ods',=20'csv',=20'ppt',=20'ppsx',=20'p?=
 =?UTF-8?q?ps',=20'odp',=20'pptx',=20'pdf',=20'epub',=20'html'?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ShowFile/ShowFile.vue     | 11 ++++++++++-
 src/components/preview/FileDetails.vue   | 12 ++++++++++++
 src/components/preview/IframePreview.vue |  7 +++++++
 src/utils/file-type.js                   |  5 +++++
 4 files changed, 34 insertions(+), 1 deletion(-)

diff --git a/src/components/ShowFile/ShowFile.vue b/src/components/ShowFile/ShowFile.vue
index 5a26856..501cd2a 100644
--- a/src/components/ShowFile/ShowFile.vue
+++ b/src/components/ShowFile/ShowFile.vue
@@ -606,9 +606,10 @@
       :file="iframePreviewRow"
       :fileHandler="fileHandler"
       :status.sync="iframePreviewVisible"
+      :specifyPreviewer="specifyPreviewer"
     ></iframe-preview>
 
-    <file-details :audio-cover-url="audioCoverUrl" :image-url="imageUrl" :file="rowContextData" :visible.sync="drawer" @openFile="fileClick"></file-details>
+    <file-details :audio-cover-url="audioCoverUrl" :image-url="imageUrl" :file="rowContextData" :visible.sync="drawer" @openFile="fileClick" @openOnlyOffice="openOnlyOffice"></file-details>
 
     <el-dialog
       class="open-file-dialog"
@@ -1095,6 +1096,7 @@ export default {
       iframePreviewRow: {},
       fileHandler: {},
       iframePreviewVisible: false,
+      specifyPreviewer: '', // 指定预览器
       audioPreviewRow: {},
       audioPreviewVisible: false,
       drawer: false,
@@ -4395,6 +4397,13 @@ export default {
         this.notPreviewDialogVisible = true
       }
     },
+    openOnlyOffice(row) {
+      this.drawer = false
+      this.iframePreviewVisible = true
+      this.iframePreviewRow = row
+      this.fileHandler = {}
+      this.specifyPreviewer = 'office'
+    },
     checkPreviewVisible() {
       if (this.iframePreviewVisible) {
         return true
diff --git a/src/components/preview/FileDetails.vue b/src/components/preview/FileDetails.vue
index b6f93f5..2a51fb9 100644
--- a/src/components/preview/FileDetails.vue
+++ b/src/components/preview/FileDetails.vue
@@ -96,12 +96,15 @@
           </el-form-item>
         </el-scrollbar>
         <el-button v-if="allowOpenFile" type="primary" size="small" @click="openFile" class="open-file">打开文件</el-button>
+        <el-button v-if="onlyOfficeSupportedFormats(file)" type="primary" size="small" @click="openOnlyOffice" class="open-file">使用OnlyOffice打开</el-button>
       </el-form>
     </el-dialog>
   </div>
 </template>
 
 <script>
+import { onlyOfficeSupportedFormats } from '@/utils/file-type'
+
 // 引入VueOfficeDocx 组件
 import VueOfficeDocx from '@vue-office/docx'
 // 引入VueOfficeDocx 相关样式
@@ -193,6 +196,9 @@ export default {
     openFile() {
       this.$emit('openFile', this.file)
     },
+    openOnlyOffice() {
+      this.$emit('openOnlyOffice', this.file)
+    },
     rendered() {
       console.log('rendered')
     },
@@ -210,6 +216,12 @@ export default {
         this.updateSyncStatus(res.data)
       })
     },
+    onlyOfficeSupportedFormats(file) {
+      if (!file || !file.suffix) {
+        return false
+      }
+      return onlyOfficeSupportedFormats.includes(file.suffix.toLowerCase())
+    },
     updateSyncStatus(dataPercent) {
       if (this.clickSync) {
         return
diff --git a/src/components/preview/IframePreview.vue b/src/components/preview/IframePreview.vue
index 6e10358..30d56d6 100644
--- a/src/components/preview/IframePreview.vue
+++ b/src/components/preview/IframePreview.vue
@@ -73,6 +73,10 @@ export default {
     status: {
       type: Boolean,
       default: false
+    },
+    specifyPreviewer: {
+      type: String,
+      default: ''
     }
   },
   data() {
@@ -91,6 +95,9 @@ export default {
   },
   computed: {
     fileType() {
+      if (this.specifyPreviewer === 'office') {
+        return 'office'
+      }
       return this.getType(this.file.suffix)
     },
   },
diff --git a/src/utils/file-type.js b/src/utils/file-type.js
index 2877ff6..0fb5a11 100644
--- a/src/utils/file-type.js
+++ b/src/utils/file-type.js
@@ -19,6 +19,11 @@ monaco.languages.getLanguages().forEach(language => {
   })
 })
 
+// onlyOffice支持的文件格式
+export const onlyOfficeSupportedFormats = [
+  'doc', 'docx', 'odt', 'rtf', 'xls', 'xlsx', 'ods', 'csv', 'ppt', 'ppsx', 'pps', 'odp', 'pptx', 'pdf', 'epub', 'html'
+]
+
 // 换行
 export const lineWrapping = [
   ''