Merge pull request #320 from jamebal/dev

feat: 以下文件格式可以使用OnlyOffice打开： 'doc', 'docx', 'odt', 'rtf', 'xls', 'xlsx', 'ods', 'csv', 'ppt', 'ppsx', 'pps', 'odp', 'pptx', 'pdf', 'epub', 'html'

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

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

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)
     },
   },

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 = [
   ''