update 预览改为onlyOffice预览

public/dev_api_config.js

@@ -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'

public/index.html

@@ -9,7 +9,7 @@
   <!--开发环境-->
   <% if (process.env.NODE_ENV === 'development' ) { %>
   <!--    onlyOffice服务器地址-->
-  <script type="text/javascript" src="http://10.10.10.45:8106/web-apps/apps/api/documents/api.js"></script>
+  <script type="text/javascript" src="http://10.10.10.45:8107/web-apps/apps/api/documents/api.js"></script>
   <script src="<%= BASE_URL %>dev_api_config.js"></script>
   <% } %>
   <!--测试环境-->
@@ -17,7 +17,7 @@
   <!--客户环境-->
   <!--<script type="text/javascript" src="http://onlyoffice.sinotruk.com/web-apps/apps/api/documents/api.js"></script>-->
   <!--公司测试环境-->
-  <script type="text/javascript" src="http://10.10.10.45:8106/web-apps/apps/api/documents/api.js"></script>
+  <script type="text/javascript" src="http://10.10.10.45:8107/web-apps/apps/api/documents/api.js"></script>
   <script src="<%= BASE_URL %>prod_api_config.js"></script>
   <% } %>
 </head>

public/prod_api_config.js

@@ -1,7 +1,7 @@
 window._CONFIG = {}
 // onlyOffice文件获取地址
-window._CONFIG.documentUrl = 'http://laws-sinotruk-server-kmc2c.yf-grp:8080/laws-sinotruk/onlyoffice/downLoadFile?path='
+window._CONFIG.documentUrl = 'http://laws-sinotruk-server-kmc2c.yf-grp:8080/laws-sinotruk/onlyOffice/downLoadFile?path='
 // onlyOffice文件保存回调地址（后端服务的ip端口，最后一个/是必须的）
 window._CONFIG.callbackUrl = 'http://laws-sinotruk-server-kmc2c.yf-grp:8080/'
 // onlyOffice自定义编辑器的地址（plugins的前端路径，最后一个/是必须的）
-window._CONFIG.configUrl = 'http://onlyofficeplugins.sinotruk.com/'
+window._CONFIG.configUrl = 'http://srms-test.sinotruk.com/onlyofficeplugins/'

src/api/manage.js

@@ -1,4 +1,5 @@
 import { axios } from '../utils/request.js'
+import Vue from 'vue'
 
 export function postAction (url, parameter) {
   return axios({
@@ -15,3 +16,47 @@ export function getAction (url, parameter) {
     params: parameter
   })
 }
+
+/**
+ * 下载文件 用于excel导出
+ * @param url
+ * @param parameter
+ * @returns {*}
+ */
+export function downFile (url, parameter) {
+  return axios({
+    url: url,
+    params: parameter,
+    method: 'get',
+    responseType: 'blob'
+  })
+}
+
+/**
+ * 下载文件
+ * @param url 文件路径
+ * @param fileName 文件名
+ * @param parameter
+ * @returns {*}
+ */
+export function downloadFile (url, fileName, parameter) {
+  return downFile(url, parameter).then((data) => {
+    if (!data || data.size === 0) {
+      Vue.prototype.$message.warning('文件下载失败')
+      return
+    }
+    if (typeof window.navigator.msSaveBlob !== 'undefined') {
+      window.navigator.msSaveBlob(new Blob([data]), fileName)
+    } else {
+      const url = window.URL.createObjectURL(new Blob([data]))
+      const link = document.createElement('a')
+      link.style.display = 'none'
+      link.href = url
+      link.setAttribute('download', fileName)
+      document.body.appendChild(link)
+      link.click()
+      document.body.removeChild(link) // 下载完成移除元素
+      window.URL.revokeObjectURL(url) // 释放掉blob对象
+    }
+  })
+}

src/router/index.js

@@ -7,7 +7,7 @@ const routes = [
   {
     path: '/',
     name: 'Home',
-    redirect: '/List'
+    redirect: '/editorPage'
   },
   {
     path: '/List',
@@ -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')
   }
 ]
 

src/views/EditorPage.vue

@@ -1,5 +1,6 @@
 <template>
   <div id="placeholder" class="nav" style="height: 100vh">
+    <div class="box-text download-btn" @click="handleDownload">下载</div>
     <div class="box-text" @click="handleRestore">还原</div>
     <div class="file-box" v-if="isFileDisplay">
       <div class="textTitle">
@@ -23,6 +24,7 @@
 
 import { historyList } from '../api/fileApi'
 import { Base64 } from 'js-base64'
+import { downloadFile } from '../api/manage'
 
 const { location } = window
 
@@ -35,7 +37,8 @@ export default {
       callbackUrl: window._CONFIG.callbackUrl,
       isFileDisplay: false,
       fileList: [],
-      reloadEditor: true
+      reloadEditor: true,
+      currentFilePath: null // 当前页面展示文件的path
     }
   },
   mounted () {
@@ -159,9 +162,11 @@ export default {
       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%',
@@ -184,7 +189,7 @@ export default {
           },
           permissions: {
             comment: true, // 定义是否可以注释文档。如果注释权限设置为true，则文档侧栏将包含“注释”菜单选项；只有将mode参数设置为edit时才生效，默认值与edit参数的值一致
-            download: true, // 定义是否可以下载文档或仅在线查看或编辑文档。如果下载权限设置为“false”下载为菜单选项将没有。默认值为true
+            download: false, // 定义是否可以下载文档或仅在线查看或编辑文档。如果下载权限设置为“false”下载为菜单选项将没有。默认值为true
             edit: true, // 文件是否可以编辑，false时文件不可编辑
             fillForms: true, // 定义是否能在文档中填充表单
             modifyFilter: true, // 定义过滤器是否可以全局应用（true）影响所有其他用户，或局部应用（false），即仅适用于当前用户。如果将mode参数设置为edit，则过滤器修改仅对电子表格编辑器可用。默认值为true。
@@ -209,7 +214,7 @@ export default {
           query: {
             id: 123456
           },
-          callbackUrl: `${this.callbackUrl}laws-sinotruk/onlyOffice/receiveFile?fileId=${this.$route.query.fileId}&fileNm=${this.$route.query.fileName}&key=${this.$route.query.key}&business=${this.$route.query.business}`,
+          callbackUrl: `${this.callbackUrl}laws-sinotruk/onlyOffice/receiveFile?fileId=${this.$route.query.fileId}&fileNm=${this.$route.query.fileName}&key=${key}&business=${this.$route.query.business}`,
           user: {
             id: this.$route.query.userId,
             name: this.$route.query.userName
@@ -295,10 +300,11 @@ export default {
      * @param file
      */
     viewFileClick (file) {
-      const filePaths = file.filePath.split('/')
+      const { href } = this.$router.resolve({
-      const fileName = filePaths[filePaths.length - 1]
+        path: '/previewHistoryPage',
-      const url = `${window._CONFIG.onlinePreviewDomainURL}?url=${encodeURIComponent(Base64.encode(this.documentUrl + file.filePath + '&fullfilename=' + fileName))}`
+        query: { ...this.$route.query, fileInfo: JSON.stringify(file) }
-      window.open(url, '_blank')
+      })
+      window.open(href, '_blank')
     },
     /**
      * 确定回滚到某个版本
@@ -317,6 +323,13 @@ export default {
       }
       this.connectEditor(file)
       this.isFileDisplay = false
+    },
+    handleDownload () {
+      if (!this.currentFilePath) {
+        return
+      }
+      const path = '/onlyOffice/downLoadFileRoma?path=' + this.currentFilePath || this.$route.query.filePath
+      downloadFile(path, this.$route.query.fileName)
     }
   },
   beforeDestroy () {
@@ -334,6 +347,7 @@ export default {
 <style scoped>
 .box-text {
   position: absolute;
+  width: 40px;
   right: 40px;
   top: 6px;
   font-size: 12px;
@@ -341,7 +355,11 @@ export default {
   color: #fff;
   cursor: pointer;
   background-color: #446995;
-  padding-left: 10px;
+  margin-left: 10px;
+}
+
+.download-btn {
+  right: 90px;
 }
 
 .file-box {

src/views/List.vue

@@ -147,7 +147,7 @@ export default {
     },
     handleEdit (record) {
       const { href } = this.$router.resolve({
-        path: '/editor',
+        path: '/editorPage',
         query: {
           filePath: record.editFilePath,
           fileName: record.fileName,

src/views/PreviewHistoryPage.vue

@@ -0,0 +1,206 @@
+<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 () {
+      const fileInfo = JSON.parse(this.$route.query.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>

src/views/modules/AddFileModal.vue

@@ -53,7 +53,7 @@ export default {
               this.$emit('ok')
               this.close()
               const { href } = this.$router.resolve({
-                path: '/editor',
+                path: '/editorPage',
                 query: {
                   filePath: data.editFilePath,
                   fileName: data.fileName,

vue.config.js

@@ -1,4 +1,5 @@
 module.exports = {
+  // publicPath: process.env.NODE_ENV === 'production' ? '/onlyofficeui/' : '/',
   publicPath: '/',
   outputDir:"onlyofficeui", //设置打包后的项目目录名称
   css: {