前言

對接onlyoffice，實現(xiàn)文檔的預(yù)覽和在線編輯功能。

一、vue + ts

1. 安裝依賴

npm install --save @onlyoffice/文檔-editor-vue
# or
yarn add @onlyoffice/document-editor-vue

2. onlyoffice組件實現(xiàn)

<template>
  <DocumentEditor
      id="docEditor"
      :documentServerUrl="documentServerUrl"
      :config="config"
  />
</template>

<script lang="ts" setup>
import type {IConfig} from "@onlyoffice/document-editor-vue";
import {DocumentEditor} from "@onlyoffice/document-editor-vue";

defineProps<{
  documentServerUrl: string,
  config: IConfig
}>()

</script>

3. 使用組件

<template>
  <div class="container_div">
    <back-history :msg="fileName"/>
    <only-office :documentServerUrl="getGlobalConfig().onlyOffice.documentServerUrl" :config="config"/>
  </div>
</template>

<script setup lang="ts">
import onlyOffice from '../../components/onlyOffice.vue'
import {reactive, ref} from "vue"
import BackHistory from "@/components/BackHistory.vue"
import Guid from 'guid'
import {useRoute} from "vue-router"
import {getGlobalConfig} from "@/utils/globalConfig"

let route = useRoute()
let data = JSON.parse(decodeURIComponent(<string>route.query.params))

let fileId = data.id
let title = ref(data.fileName)
let fileName = ref(title.value.slice(0, title.value.lastIndexOf('.')))
let fileType = data.ext

//從配置文件讀取onlyoffice配置
const editorConfig = getGlobalConfig().onlyOffice.editorConfig
editorConfig.callbackUrl += fileId

function handleDocType(fileType) {
  let docType = '';
  let fileTypesDoc = [
    'doc', 'docm', 'docx', 'dot', 'dotm', 'dotx', 'epub', 'fodt', 'htm', 'html', 'mht', 'odt', 'ott', 'pdf', 'rtf', 'txt', 'djvu', 'xps'
  ];
  let fileTypesCsv = [
    'csv', 'fods', 'ods', 'ots', 'xls', 'xlsm', 'xlsx', 'xlt', 'xltm', 'xltx'
  ];
  let fileTypesPPt = [
    'fodp', 'odp', 'otp', 'pot', 'potm', 'potx', 'pps', 'ppsm', 'ppsx', 'ppt', 'pptm', 'pptx'
  ];
  if (fileTypesDoc.includes(fileType)) {
    docType = 'word'
  }
  if (fileTypesCsv.includes(fileType)) {
    docType = 'cell'
  }
  if (fileTypesPPt.includes(fileType)) {
    docType = 'slide'
  }
  return docType;
}

let config =
    {
      documentType: handleDocType(fileType),
      document: reactive<any>({
        fileType: fileType,
        key: Guid.raw(),
        title: title,
        url: data.url
      }),
      editorConfig: editorConfig,
      height: '850'
    }
</script>

4. 我的配置文件

{
  "onlyOffice": {
    "documentServerUrl": "onlyoffice 服務(wù)地址",
    "editorConfig": {
      "callbackUrl": "http://172.0.0.139:8095/api/gsdss/file/v1/onlyoffice/save?fileId=",
      "lang": "zh-CN"
    }
  }
}

二、springboot 回調(diào)代碼

1. 本地存儲

        /**
     * onlyOfficeCallBack
     */
    @ApiOperationSupport(order = 10)
    @PostMapping(value = "/v1/onlyoffice/save")
    public String onlyOfficeCallBack(String fileId, HttpServletRequest request, HttpServletResponse response) {
        return service.onlyOfficeCallBack(request, response, fileId);
    }


	@Override
    public String onlyOfficeCallBack(HttpServletRequest request, HttpServletResponse response, String fileId) {
        Scanner scanner;
        try {
            scanner = new Scanner(request.getInputStream()).useDelimiter("\\A");
            String body = scanner.hasNext() ? scanner.next() : "";
            OfficeFileResp jsonObj = JsonUtil.of(body, OfficeFileResp.class);
            
            if (jsonObj.getStatus() == 2) {
                String downloadUri = jsonObj.getUrl();
                URL url = new URL(downloadUri);
                HttpURLConnection connection = (java.net.HttpURLConnection) url.openConnection();
                InputStream stream = connection.getInputStream();
                //查詢附件信息，以獲取附件存儲路徑
                AttachmentPO po = findById(fileId);
                File savedFile = new File(po.getPath());
                try (FileOutputStream out = new FileOutputStream(savedFile)) {
                    int read;
                    final byte[] bytes = new byte[1024];
                    while ((read = stream.read(bytes)) != -1) {
                        out.write(bytes, 0, read);
                    }
                    out.flush();
                }
                connection.disconnect();
            }
            return "{\"error\":0}";
        } catch (IOException e) {
            throw new BusinessException("onlyOffice 保存回調(diào)失敗", e);
        }
    }

三、效果展示

修改離開當(dāng)前頁面后會自動觸發(fā)保存，大約5秒后下載文件，文件已經(jīng)是最新。

踩坑總結(jié)

問題1

The document could not be saved. Please check connection settings or
contact your administratorWhen you click the ‘Ok’ button, you will be
prompted to download the document.
（這份文件無法保存。請檢查連接設(shè)置或聯(lián)系您的管理員當(dāng)你點擊“OK“按鈕,系統(tǒng)將提示您下載文檔。）

回調(diào)接口不通導(dǎo)致，callbackUrl必須是onlyoffice所在服務(wù)器可訪問的接口地址，可以進(jìn)入docker鏡像內(nèi)部查看onlyoffice日志就會有所發(fā)現(xiàn)。

docker exec -it 【鏡像id】/bin/bash

tail -f /var/log/onlyoffice/documentserver/docservice/out.log-20230805

Error: connect ECONNREFUSED 127.0.0.1:8194
at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1107:14)
[2023-08-07T00:57:50.813] [ERROR] nodeJS - postData error: docId = fc5d1b8f6211403fa8788661007ccd42;url = https://localhost:8194/api/gsdss/file/v1/onlyoffice/save;data = {“key”:“fc5d1b8f6211403fa8788661007ccd42”,“status”:1,“users”:[“uid-1691118844328”],“actions”:[{“type”:1,“userid”:“uid-1691118844328”}]}

問題2

文件版本已更改(The file version has been changed)

document.key 每次編輯和保存文檔時，都必須重新生成，目前采用的guid，但是沒有捕獲編輯后保存的事件去改變，而是每次加載都用新的key

有價值的參考：

1. https://www.onlyoffice.org.cn/guide/parameters.html
2. https://blog.csdn.net/qq_43548590/article/details/129948103
3. https://www.jianshu.com/p/2d4f977ffeac
4. https://api.onlyoffice.com/editors/config/
5. https://devpress.csdn.net/viewdesign/64084b4b986c660f3cf917ba.html

文章來源地址http://www.zghlxwxcb.cn/news/detail-636622.html

到了這里，關(guān)于springboot vue 初步集成onlyoffice的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！