update 预览改为onlyOffice预览

【update】预览文件地址修改
2024-04-20 19:37:56 +08:00 · 2024-04-19 18:04:27 +08:00 · 2024-03-21 12:58:42 +08:00 · 2024-03-21 12:52:38 +08:00 · 2024-03-21 11:51:40 +08:00 · 2024-03-21 11:45:52 +08:00
10 changed files with 290 additions and 17 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'
@@ -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>
@@ -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/'
@@ -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对象
+    }
+  })
+}
@@ -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')
  }
 ]

@@ -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 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, fileInfo: JSON.stringify(file) }
+      })
+      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 {
@@ -147,7 +147,7 @@ export default {
    },
    handleEdit (record) {
      const { href } = this.$router.resolve({
-        path: '/editor',
+        path: '/editorPage',
        query: {
          filePath: record.editFilePath,
          fileName: record.fileName,
@@ -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>
@@ -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,
@@ -1,4 +1,5 @@
 module.exports = {
+  // publicPath: process.env.NODE_ENV === 'production' ? '/onlyofficeui/' : '/',
  publicPath: '/',
  outputDir:"onlyofficeui", //设置打包后的项目目录名称
  css: {
Author	SHA1	Message	Date
赵霄	4781d4062e	update 预览改为onlyOffice预览	2024-04-20 19:37:56 +08:00
赵霄	5f674a2f45	update 预览改为onlyOffice预览	2024-04-19 18:04:27 +08:00
fengchenchen	15614edd2f	【update】预览文件地址修改	2024-03-21 12:58:42 +08:00
fengchenchen	23f5f5b47a	【update】测试环境配置项文件的修改	2024-03-21 12:52:38 +08:00
赵霄	1c9a4dab88	update 错误路径调整	2024-03-21 11:51:40 +08:00
赵霄	f27f9c9401	update 错误路径调整	2024-03-21 11:45:52 +08:00
赵霄	490f7678e9	update 罗马数字页码文件下载	2024-03-21 09:20:18 +08:00
赵霄	c4b7ac3dbb	update 错误路径调整	2024-02-02 17:25:24 +08:00
赵霄	87c7014734	update onlyoffice改回8105	2024-02-02 14:52:39 +08:00
赵霄	0c74085b64	update key调整	2024-02-02 14:35:45 +08:00