update 预览改为onlyOffice预览

2024-04-19 18:04:27 +08:00
parent 15614edd2f
commit 5f674a2f45
5 changed files with 215 additions and 8 deletions
@@ -5,5 +5,3 @@ window._CONFIG.documentUrl = 'http://10.0.1.19:8184/laws-sinotruk/onlyOffice/dow
 window._CONFIG.callbackUrl = 'http://10.0.1.19:8184/'
 // onlyOffice自定义编辑器的地址（plugins的前端路径，最后一个/是必须的）
 window._CONFIG.configUrl = 'http://10.0.1.19:8082/'
-// 预览文件地址
-window._CONFIG.onlinePreviewDomainURL = 'http://127.0.0.1:8012/onlinePreview'
@@ -5,5 +5,3 @@ window._CONFIG.documentUrl = 'http://laws-sinotruk-server-kmc2c.yf-grp:8080/laws
 window._CONFIG.callbackUrl = 'http://laws-sinotruk-server-kmc2c.yf-grp:8080/'
 // onlyOffice自定义编辑器的地址（plugins的前端路径，最后一个/是必须的）
 window._CONFIG.configUrl = 'http://srms-test.sinotruk.com/onlyofficeplugins/'
-// 预览文件地址
-window._CONFIG.onlinePreviewDomainURL = 'http://srms-test.sinotruk.com/kkfileview/onlinePreview'
@@ -32,6 +32,11 @@ const routes = [
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import('../views/EditorPage.vue')
+  },
+  {
+    path: '/previewHistoryPage',
+    name: 'PreviewHistoryPage',
+    component: () => import('../views/PreviewHistoryPage')
  }
 ]

@@ -300,10 +300,11 @@ export default {
     * @param file
     */
    viewFileClick (file) {
-      const filePaths = file.filePath.split('/')
-      const fileName = filePaths[filePaths.length - 1]
-      const url = `${window._CONFIG.onlinePreviewDomainURL}?url=${encodeURIComponent(Base64.encode(this.documentUrl + file.filePath + '&fullfilename=' + fileName))}`
-      window.open(url, '_blank')
+      const { href } = this.$router.resolve({
+        path: '/previewHistoryPage',
+        query: this.$route.query
+      })
+      window.open(href, '_blank')
    },
    /**
     * 确定回滚到某个版本
@@ -0,0 +1,205 @@
+<template>
+  <div id="placeholder" class="nav" style="height: 100vh">
+    <div id="iframeEditor"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'PreviewHistoryPage',
+  data () {
+    return {
+      docEditor: null,
+      documentUrl: window._CONFIG.documentUrl,
+      currentFilePath: null // 当前页面展示文件的path
+    }
+  },
+  mounted () {
+    document.title = '预览'
+    this.connectEditor()
+    // 从主系统跳过来需要调这个方法，目前系统内跳不触发
+    if (window.addEventListener) {
+      window.addEventListener('load', this.connectEditor)
+      window.addEventListener('resize', this.fixSize)
+    } else if (window.attachEvent) {
+      window.attachEvent('onload', this.connectEditor)
+      window.attachEvent('onresize', this.fixSize)
+    }
+  },
+  methods: {
+    innerAlert (message) {
+      if (console && console.log) console.log(message)
+    },
+    onAppReady () {
+      console.log(123)
+      this.innerAlert('Document editor ready')
+    },
+    onDocumentStateChange (event) {
+      const title = document.title.replace(/\*$/g, '')
+      document.title = title + (event.data ? '*' : '')
+      // console.log('尝试获取dom')
+      // console.log(document.getElementsByTagName('iframe'))
+      // console.log(document.getElementsByTagName('iframe')[0])
+      // console.log(document.getElementsByTagName('iframe')[0].contentDocument)
+      // console.log(document.getElementsByTagName('iframe')[0].contentWindow)
+      // console.log(document.getElementsByTagName('iframe')[0].contentWindow.document)
+      // console.log(document.getElementsByTagName('iframe')[0].contentWindow.document.getElementById('id_main_view'))
+      // console.log(document.getElementsByTagName('iframe')[0].contentDocument.getElementById('id_main_view'))
+    },
+    onRequestEditRights () {
+      location.href = location.href.replace(RegExp('mode=view', 'i'), '')
+    },
+    onRequestHistory (event) {
+      const historyObj =
+        [
+          {
+            changes: null,
+            key: this.$route.query.attId,
+            version: 1,
+            created: '2022-10-17 14:17:09',
+            user: { id: this.$route.query.userId, name: this.$route.query.userName }
+          }
+        ] || null
+
+      this.docEditor.refreshHistory({
+        currentVersion: '1',
+        history: historyObj
+      })
+    },
+    onRequestHistoryData (data) {
+      console.log(data)
+      const version = data.data
+      const historyData =
+        [
+          {
+            'version': 1,
+            'key': this.$route.query.attId,
+            'url': this.documentUrl + this.$route.query.filePath + this.$route.query.fileName
+          }
+        ] || null
+      this.docEditor.setHistoryData(historyData[version - 1])
+    },
+    onRequestHistoryClose (event) {
+      document.location.reload()
+    },
+    onError (event) {
+      console.log(event)
+      if (event) this.innerAlert(event.data)
+    },
+    onOutdatedVersion (event) {
+      // console.log(event);
+      location.reload(true)
+    },
+    replaceActionLink (href, linkParam) {
+      let link
+      const actionIndex = href.indexOf('&action=')
+      // eslint-disable-next-line eqeqeq
+      if (actionIndex != -1) {
+        const endIndex = href.indexOf('&', actionIndex + '&action='.length)
+        // eslint-disable-next-line eqeqeq
+        if (endIndex != -1) {
+          link = `${
+            href.substring(0, actionIndex) + href.substring(endIndex)
+          }&action=${encodeURIComponent(linkParam)}`
+        } else {
+          link = `${href.substring(0, actionIndex)}&action=${encodeURIComponent(
+            linkParam
+          )}`
+        }
+      } else {
+        link = `${href}&action=${encodeURIComponent(linkParam)}`
+      }
+      return link
+    },
+    onMakeActionLink (event) {
+      const actionData = event.data
+      const linkParam = JSON.stringify(actionData)
+      this.docEditor.setActionLink(this.replaceActionLink(location.href, linkParam))
+    },
+    fixSize () {
+      const wrapEl = document.getElementsByClassName('form')
+      if (wrapEl.length) {
+        // eslint-disable-next-line no-restricted-globals
+        wrapEl[0].style.height = `${screen.availHeight}px`
+        window.scrollTo(0, -1)
+        wrapEl[0].style.height = `${window.innerHeight}px`
+      }
+    },
+    onDocumentSaved () {
+      console.log(12)
+    },
+    connectEditor (fileInfo = {}) {
+      const nowTime = new Date().getTime()
+      let url = ''
+      let key = ''
+      if (fileInfo.id) {
+        url = this.documentUrl + fileInfo.filePath
+        key = this.$route.query.key + nowTime
+        this.currentFilePath = fileInfo.filePath
+      } else {
+        url = `${this.documentUrl}${this.$route.query.filePath}`
+        key = this.$route.query.key + nowTime
+        this.currentFilePath = this.$route.query.filePath
+      }
+      this.docEditor = new DocsAPI.DocEditor('iframeEditor', {
+        width: '100%',
+        height: '100%',
+        type: 'desktop',
+        documentType: 'word',
+        token: 'secret',
+        document: {
+          title: this.$route.query.fileName,
+          url: url,
+          fileType: this.$route.query.fileType,
+          key: key,
+          permissions: {
+            comment: false, // 定义是否可以注释文档。如果注释权限设置为true，则文档侧栏将包含“注释”菜单选项；只有将mode参数设置为edit时才生效，默认值与edit参数的值一致
+            download: false, // 定义是否可以下载文档或仅在线查看或编辑文档。如果下载权限设置为“false”下载为菜单选项将没有。默认值为true
+            edit: false, // 文件是否可以编辑，false时文件不可编辑
+            fillForms: false, // 定义是否能在文档中填充表单
+            modifyFilter: false, // 定义过滤器是否可以全局应用（true）影响所有其他用户，或局部应用（false），即仅适用于当前用户。如果将mode参数设置为edit，则过滤器修改仅对电子表格编辑器可用。默认值为true。
+            modifyContentControl: false, // 定义是否可以更改内容控件设置。仅当mode参数设置为edit时，内容控件修改才可用于文档编辑器。默认值为true。
+            review: false // 第一是否显示审阅文档菜单
+          }
+        },
+        editorConfig: {
+          actionLink: null,
+          mode: 'view',
+          lang: 'zh',
+          user: {
+            id: this.$route.query.userId,
+            name: this.$route.query.userName
+          }
+        },
+        events: {
+          'onAppReady': this.onAppReady,
+          'onDocumentStateChange': this.onDocumentStateChange, // 文档改变后的回调
+          'onRequestEditRights': this.onRequestEditRights, // 用户尝试通过单击“编辑文档”按钮尝试将文档从视图切换到编辑模式时调用的函数。调用该函数时，必须在编辑模式下再次初始化编辑器。如果未声明该方法，则不会显示“编辑”按钮。
+          'onError': this.onError,
+          'onRequestHistory': this.onRequestHistory, // 用户尝试通过单击“版本历史记录”按钮显示文档版本历史记录时调用的函数。要显示文档版本历史，您必须调用refreshHistory方法。如果未声明该方法和onRequestHistoryData方法，则不会显示“版本历史记录”按钮。
+          'onRequestHistoryData': this.onRequestHistoryData, // 用户尝试单击文档版本历史记录中的特定文档版本时调用的函数。
+          'onRequestHistoryClose': this.onRequestHistoryClose, // 当用户尝试通过单击“关闭历史记录”按钮来查看文档版本历史记录时，试图调用该文档时调用的函数。调用该函数时，必须在编辑模式下再次初始化编辑器。如果未声明该方法，则不会显示“关闭历史记录”按钮。
+          'onOutdatedVersion': this.onOutdatedVersion, // 使用旧的document.key值打开文档进行编辑时，显示错误后调用的函数，该值用于编辑先前的文档版本并已成功保存。调用此事件时，必须使用新的document.key重新初始化编辑器。
+          'onMakeActionLink': this.onMakeActionLink,
+          'onDocumentSaved': this.onDocumentSaved
+        }
+      })
+      console.log(this.docEditor)
+      // this.fixSize()
+    }
+  },
+  beforeDestroy () {
+    if (window.removeEventListener) {
+      window.removeEventListener('load', this.connectEditor)
+      window.removeEventListener('resize', this.fixSize)
+    } else if (window.detachEvent) {
+      window.detachEvent('onload', this.connectEditor)
+      window.detachEvent('onresize', this.fixSize)
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>