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