oonlyoffice歷史版本功能實現 （編輯器功能實現）springboot+vue2

前提 需要注意把這個 (改成自己服務器的ip或者域名) 改成 自己服務器的域名或者地址

1. onloyoffice 服務器部署 搜索其他文章

2. 前段代碼 vue 2

2.1 需要注意把這個 (改成自己服務器的ip或者域名) 改成 自己服務器的域名或者地址

2.2. openedit getHistoryData 這兩個 是調用后端的 接口 改成自己項目的寫法 都是 post 請求

2.3 下面是整個頁面代碼 需要 別的頁面進入下面這個頁面 入參是 文件id

舉例

進入editer.vue 頁面的 頁面代碼 row.id 是文件id 也就是 onloyoffice 文件id

//row.id 是文件id 也就是 onloyoffice 文件id
//  /only/editer/   這是頁面路由的地址需要在路由里面配置
//頁面
openFile(row) {window.open('#/only/editer/' + row.id,'_blank');},

文件名字 editer.vue

<template><div><div id="onlyoffice-container" ref="editorContainer"></div></div>
</template><script>export default {name: 'OnlyOfficeEditor',props: {isEdit: {type: Boolean,default: true}},data() {return {docEditor: null,currentVersion: null,fileToken: null,historyData: null,historys: [],historyList: []};},mounted() {this.loadScript().then(() => {this.initEditor();});},methods: {async loadScript() {return new Promise((resolve, reject) => {const scriptId = "onlyoffice-api-script";if (!document.getElementById(scriptId)) {const script = document.createElement('script');script.id = scriptId;script.src = "https://(改成自己服務器的ip或者域名)/ds-vpath/web-apps/apps/api/documents/api.js"; // 替換為你的 ONLYOFFICE 服務器地址script.type = "text/javascript";script.onload = resolve;script.onerror = reject;document.head.appendChild(script);} else {resolve();}});},initEditor() {if (this.docEditor) {this.docEditor.destroyEditor();this.docEditor = null;}openedit({"fileId": this.$route.params.id}).then(res  => {if (res.code  === 200) {//這是主編輯器獲取的數據  config let config = res.data.openedit;//處理后端返回的歷史版本數據const historyList = res.data.historyList;const fileToken = res.data.fileToken;const currentVersion  = historyList[0].version; // 假設最新版本為第一個元素// 添加版本歷史事件處理config.events  = {//這里拿到的是 左側版本的 數據 比如 版本1 版本2onRequestHistory: () => {this.docEditor.refreshHistory({currentVersion: currentVersion,token: fileToken,history: historyList});},//這里是 左側關閉歷史記錄 按鈕調用這個方法onRequestHistoryClose: () => {document.location.reload();},//這是左側 點擊版本  對應的版本內容onRequestHistoryData: (event) => {const version = event.datagetHistoryData({"fileId": this.$route.params.id,"version": version}).then(res  => {const historyData = res.data.historyData;this.docEditor.setHistoryData(historyData);}).catch(err => {console.log(err);});},//版本恢復功能onRequestRestore: (event) => {//待實現}};this.docEditor  = new window.DocsAPI.DocEditor(this.$refs.editorContainer.id,  config);}}).catch(err => {console.log(err);});}},beforeDestroy() {if (this.docEditor)  {this.docEditor.destroyEditor();this.docEditor  = null;}if (this.DocsAPIInterval) {clearInterval(this.DocsAPIInterval);}},beforeRouteLeave(to, from, next) {if (this.docEditor)  {this.docEditor.destroyEditor();this.docEditor  = null;}if (this.DocsAPIInterval) {clearInterval(this.DocsAPIInterval);}next();}
};
</script><style>
iframe {border: none;width: 100%;height: 100vh;
}
</style>

3. 后端java 代碼

3.1 controller 代碼

    @PostMapping("/openedit")public RestResultDTO openedit(HttpServletRequest request, @RequestBody OnlyofficeRequestDTO params) {try {if (CommonFunctions.isEmpty(params.getFileId())) {throw new BusinessServiceException("非空校驗失敗");}Map<String, Object> resultMap  = onlyofficeService.openedit(params);return RestResultDTO.success(resultMap);} catch (Exception e) {LOGGER.error("openedit 方法發生異常: ", e);return RestResultDTO.error(ResponseCodeDTO.INTERNAL_SERVER_ERROR, e.getMessage());}}

@PostMapping("/getHistoryData")public RestResultDTO getHistoryData(HttpServletRequest request, @RequestBody OnlyofficeRequestDTO params) {try {if (CommonFunctions.isEmpty(params.getFileId()) || CommonFunctions.isEmpty(params.getVersion())) {throw new BusinessServiceException("非空校驗失敗");}Map<String, Object> resultMap  = onlyofficeService.getHistoryData(params);return RestResultDTO.success(resultMap);} catch (Exception e) {LOGGER.error("openedit 方法發生異常: ", e);return RestResultDTO.error(ResponseCodeDTO.INTERNAL_SERVER_ERROR, e.getMessage());}}

3.2 service 代碼

    Map<String, Object> openedit(OnlyofficeRequestDTO params);

 //獲取文件的初始化配置Map<String, Object> getHistoryData(OnlyofficeRequestDTO params);

3.3 serviceImpl 代碼

       @Overridepublic Map<String, Object> openedit(OnlyofficeRequestDTO params) {String fileId = params.getFileId();String permissionType = "";JSONObject onlyOfficeConfig = null;try {String result = HttpUtils.executeRequestOnlyoffice(HttpUtils.O_SHAREFILE_URL + fileId + "/openedit", null, null, "UTF-8", "get");JSONObject resJsonObject = JSONObject.parseObject(result);if (CollectionUtils.isEmpty(resJsonObject)) {throw new BusinessServiceException("獲取配置文件異常");} else if (resJsonObject.getInteger("statusCode") == 200) {onlyOfficeConfig = resJsonObject.getJSONObject("response");} else if (resJsonObject.getInteger("statusCode") == 500) {throw new BusinessServiceException(resJsonObject.getJSONObject("error").getString("message"));} else {throw new BusinessServiceException("獲取配置文件異常");}//只讀if ("4".equals(permissionType)) {onlyOfficeConfig.getJSONObject("editorConfig").put("mode", "view");}} catch (Exception e) {LOGGER.error("解析JSON響應失敗", e);throw new BusinessServiceException("", e);}JSONArray responseArray = null;try {String result = HttpUtils.executeRequestOnlyoffice(HttpUtils.O_FILES_URL  + "/edit-history?fileId=" + fileId, null, null, "UTF-8", "get");// 嘗試解析為 JSONArrayJSONArray resJsonArray = JSONArray.parseArray(result);if (CollectionUtils.isEmpty(resJsonArray))  {throw new BusinessServiceException("獲取配置文件異常");}responseArray = resJsonArray;} catch (Exception e) {LOGGER.error(" 解析JSON響應失敗", e);throw new BusinessServiceException("", e);}// 使用 Map 封裝多個 JSON 對象Map<String, Object> resultMap = new HashMap<>();resultMap.put("openedit", onlyOfficeConfig);resultMap.put("historyList", responseArray);try {resultMap.put("fileToken",HttpUtils.renovateAuthorizationToken());} catch (Exception e) {LOGGER.error(" 獲取token失敗", e);throw new BusinessServiceException("", e);}return resultMap;}

    @Overridepublic Map<String, Object> getHistoryData(OnlyofficeRequestDTO params) {String fileId = params.getFileId();String version = params.getVersion();JSONObject responseArray = null;try {String result = HttpUtils.executeRequestOnlyoffice(HttpUtils.O_FILES_URL + "/edit-diff-url?fileId=" + fileId + "&version=" + version, null, null, "UTF-8", "get");responseArray = JSONObject.parseObject(result);if (CollectionUtils.isEmpty(responseArray))  {throw new BusinessServiceException("獲取配置文件異常");}} catch (Exception e) {LOGGER.error("解析JSON響應失敗", e);throw new BusinessServiceException("", e);}// 使用 Map 封裝多個 JSON 對象Map<String, Object> resultMap = new HashMap<>();resultMap.put("historyData", responseArray);return resultMap;}

3.3公共方法代碼

  /*** 根據請求類型執行POST或PUT請求*/public static String executeRequestOnlyoffice(String url, Map<String, Object> params, Map<String, String> headers, String encoding, String requestType) throws Exception {Map<String, String> headersCover = new HashMap<>();String authorizationToken = getAuthorizationToken();//覆蓋默認請求頭headersCover.put("Authorization", authorizationToken);headersCover.put("Accept", "application/json");headersCover.put("Content-Type", "application/json");if (headers != null) {for (Map.Entry<String, String> entry : headers.entrySet()) {headersCover.put(entry.getKey(), entry.getValue());}}switch (requestType.toLowerCase()) {case "get":return executeGetRequestCommon(url, params, headersCover, encoding);case "post":return executePostRequestCommon(url, params, headersCover, encoding);case "put":return executePutRequestCommon(url, params, headersCover, encoding);case "delete":return executeDeleteRequestCommon(url, params, headersCover, encoding);default:throw new IllegalArgumentException("Unsupported request type: " + requestType);}}

 /*** 獲取授權Token*/public static synchronized void refreshAuthorizationToken() throws Exception {Map<String, Object> params = new HashMap<>();params.put("userName", "");//輸入onloyoffice 登錄用戶名params.put("password", "");//輸入onloyoffice登錄密碼Map<String, String> headers = new HashMap<>();headers.put("Accept", "application/json");headers.put("Content-Type", "application/json");String result = executePostRequestCommon(HttpUtils.O_AUTH_URL, params, headers, "UTF-8");JSONObject jsonObject = JSONObject.parseObject(result);HttpUtils.authorizationToken = "Bearer " + jsonObject.getJSONObject("response").getString("token");}// 獲取Token的方法@PostConstructpublic static String getAuthorizationToken() throws Exception {if (CommonFunctions.isEmpty(HttpUtils.authorizationToken)) {refreshAuthorizationToken();}return HttpUtils.authorizationToken;}

    /*** 執行GET通用請求*/public static String executeGetRequestCommon(String url, Map<String, Object> params, Map<String, String> headers, String encoding) throws Exception {// 創建一個帶有默認配置的HttpClient，并設置超時時間RequestConfig requestConfig = RequestConfig.custom().setConnectTimeout(5000) // 連接超時時間.setSocketTimeout(10000) // 讀取超時時間.build();try (CloseableHttpClient httpClient = HttpClients.custom().setDefaultRequestConfig(requestConfig).build()) {// 構建帶有查詢參數的URLif (params != null && !params.isEmpty()) {StringBuilder queryString = new StringBuilder(url);if (!url.contains("?")) {queryString.append("?");} else {queryString.append("&");}for (String key : params.keySet()) {queryString.append(key).append("=").append(params.get(key)).append("&");}// 去掉最后一個多余的&if (queryString.toString().endsWith("&")) {queryString.setLength(queryString.length() - 1);}url = queryString.toString();}HttpGet httpGet = new HttpGet(url);// 添加自定義頭信息if (headers != null) {for (Map.Entry<String, String> entry : headers.entrySet()) {httpGet.addHeader(entry.getKey(), entry.getValue());}}// 執行請求并獲取響應try (CloseableHttpResponse response = httpClient.execute(httpGet)) {HttpEntity entity = response.getEntity();return entity != null ? EntityUtils.toString(entity, encoding != null ? encoding : "UTF-8") : null;}} catch (IOException e) {logger.error("Error executing GET request to URL: {}. Exception: {}", url, e.getMessage(), e);throw e;}}

public static String O_FILES_URL = "https://（自己服務器ip或者域名）/Products/Files/Services/WCFService/service.svc"public static String O_SHAREFILE_URL = "https://（自己服務器ip或者域名）/api/2.0/files/file/"

/*** 獲取授權Token* @return 授權Token字符串* @throws Exception 如果請求或解析失敗*/public static String renovateAuthorizationToken() throws Exception {// 構造請求參數Map<String, Object> params = new HashMap<>();params.put("userName", "");//輸入onloyoffice 登錄用戶名params.put("password", "");//輸入onloyoffice登錄密碼// 構造請求頭Map<String, String> headers = new HashMap<>();headers.put("Accept", "application/json");headers.put("Content-Type", "application/json");// 執行POST請求并獲取結果String result = executePostRequestCommon(HttpUtils.O_AUTH_URL, params, headers, "UTF-8");// 解析JSON結果JSONObject jsonObject = JSONObject.parseObject(result);return jsonObject.getJSONObject("response").getString("token");}

4.效果圖

5.可以參考此文章優化代碼

https://www.cnblogs.com/gamepen/p/17849005.html