onlyoffice 在线编辑集成【实现查看版本历史】

原创 已于 2024-12-05 14:02:43 修改 · 1k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #前端 #开发语言

于 2024-12-05 13:56:07 首次发布

昨天完成了onlyoffice 在线编辑集成，在此基础上实现查看编辑历史记录,效果如下：

直接上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文档编辑</title>
    <script src="http://192.168.0.12:8001/web-apps/apps/api/documents/api.js"></script>
</head>
<body style="margin:0px;padding:0px;">
    <div id="placeholder" class = "nav" style="width:100%;height:100%;min-height:900px;"></div>
</body>
<script>

window.onmessage = function (event) {
	var data = event.data;
    //var data = JSON.parse(event.data);
    //console.log(data)
    if (data.event == "onDocumentStateChange" && data.data == false) {
    	console.log("保存成功");
    }
}

var fileInfo = ${fileInfo};
var fileid = "${fileid}";
var uuid = "${uuid}";
var currentVersion = "${currentVersion}";
var names = "${names}";
var suffix,fileName;
if(fileInfo) {
	suffix = fileInfo.suffix;
	fileName = fileInfo.fileName;
}

function handleDocType(fileType) {
	  var docType = '';
	  var fileTypesDoc = [
	    'doc', 'docm', 'docx', 'dot', 'dotm', 'dotx', 'epub', 'fodt', 'htm', 'html', 'mht', 'odt', 'ott', 'pdf', 'rtf', 'txt', 'djvu', 'xps'
	  ];
	  var fileTypesCsv = [
	    'csv', 'fods', 'ods', 'ots', 'xls', 'xlsm', 'xlsx', 'xlt', 'xltm', 'xltx'
	  ];
	  var 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;
	}
	
	var origin   = window.location.origin;
	
	var loglist = ${loglist};
	var historys = [];
	var logjson = {};
	for(var i in loglist) {
		var log = loglist[i];
		//console.log(log)
		historys.push({
			"created": log.lastsave,
             "key": log.key,
             "user": {
                 "id": log.userid,
                 "name": log.names
             },
             "version": log.version
		});
		
		logjson[log.version] = {
				"changesUrl": origin+"/sysfile/download2?id="+log.changesurlFileId,
		        "fileType": log.fileType,
		        "key": log.key,
		        "previous": {
		            "fileType": log.fileType,
		            "key": log.prekey,
		            "url": origin+"/sysfile/download2?id="+log.preurlFileId,
		        },
		        "token": "",
		        "url": origin+"/sysfile/download2?id="+log.urlFileId,
		        "version": log.version
		}
	}
	
	//console.log(logjson)
	
	
	var onRequestHistory = function () {
	    docEditor.refreshHistory({
	        "currentVersion": currentVersion,
	        "history": historys
	    });
	};
	
	var onRequestHistoryClose = function () {
	    document.location.reload();
	};
	
	var onRequestHistoryData = function (event) {
		//console.log(event)
	    var version = event.data;
	    docEditor.setHistoryData(logjson[version])
	};

	var docEditor =  new DocsAPI.DocEditor("placeholder", {
        "document": {
            "fileType": suffix, //文件类型
            "key": uuid, //文件key，确保唯一就行
            "title": fileName, //文件名称
            "url": origin+"/sysfile/download2?id="+fileid,
            "permissions": {
                "edit": true,
                "comment": true,
                "download": false,
                "fillForms": true,
                "print": true,
                "review": true
            },
        },
        "documentType": handleDocType(suffix), //word:docx,xlsx:cell
        "type": "desktop",
        "events": {
            "onRequestHistory": onRequestHistory,
            "onRequestHistoryClose": onRequestHistoryClose,
            "onRequestHistoryData": onRequestHistoryData
        },
        "width": "100%",
        "height": "900px",
        "editorConfig": {
            "callbackUrl": origin+"/admin/onlyoffice/save?fileid="+fileid+"&names="+names,
			"lang":"zh-CN",
			"customization":{
		        "forcesave":"true",
		        "download": "false"
		        //,"trackChanges": true,//true为对自己启动，false为对自己关闭。
                //"review": {
                // "hoverMode": true, //定义检查显示模式:通过悬停更改(true)在工具提示中显示检查，或者通过单击更改(false)在气泡中显示检查。默认值为false。
                //}
		    },
		    "mode":""//view
        },
        "token":""
    });

	
	
</script>
</html>
import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.Table;

import lombok.Data;
import lombok.EqualsAndHashCode;

@Data
@EqualsAndHashCode(callSuper = false)
@Table(name = "officelog")
@Entity
public class Officelog{
	private static final long serialVersionUID = 6841210424356828509L;
	private Long fileid; //文件id
	private String filetype;//docx
	private String lastsave;
	
	@Column(name = "changesurl", length = 500)
	private String changesurl;
	private String forcesavetype;
	private String key;
	
	@Column(name = "url", length = 500)
	private String url;
	private String status;
	private String serverVersion;
	private Integer version;//版本
	private String prekey;//上一版本key
	private String preurl;//上一版本url
	private String userid;
	private String names;
	
	private Long urlFileId;
	private Long preurlFileId;
	private Long changesurlFileId;
	
	
}


@Controller
@RequestMapping("/admin")
public class OnlyofficeController {
	
	@Value("${file.uploadPath}")
	private String uploadPath;
	
	@Autowired
	private FilePreviewService filePreviewService;
	
	@Autowired
	private OfficelogDao officelogDao;
	
	@Resource
	private CommonService commonService;
	
	@Resource
	private SysFileDao sysFileDao;
	
	@GetMapping("/onlyoffice/edit")
	public String edit(Model model,HttpServletRequest request) {
		Long fileid = StrUtils.parseLong(request.getParameter("fileid"));
		SysFileEntity fileInfo = filePreviewService.getFileListByid(fileid);
		request.setAttribute("fileid", fileid+"");
		request.setAttribute("uuid", UUID.fastUUID());
		request.setAttribute("fileInfo",JSONObject.toJSONString(fileInfo));
		
		List<Officelog> loglist =  officelogDao.getOfficeloglist(fileid);
		request.setAttribute("loglist",JSONArray.toJSON(loglist).toString());
		Integer currentVersion = 1;
		if(loglist.size()>0) {
			currentVersion = loglist.get(loglist.size()-1).getVersion();
		}
		request.setAttribute("currentVersion",currentVersion);
		
		SysUserEntity user = commonService.getCurrentUser();
		request.setAttribute("names",user.getName());
		return "document";
	}
	
	
	@PostMapping(value = "/onlyoffice/save")
	@Transactional
	@ResponseBody
	public String onlyOfficeCallBack(HttpServletRequest request, HttpServletResponse response) {
		System.out.println("RemoteAddr----"+request.getRemoteAddr());//client's IP address from the remote host
		System.out.println("User-Agent----"+request.getHeader("User-Agent"));
		Long fileid = StrUtils.parseLong(request.getParameter("fileid"));
		String names = StrUtils.getString(request.getParameter("names"));
		Scanner scanner;
	    try {
	        scanner = new Scanner(request.getInputStream()).useDelimiter("\\A");
	        String body = scanner.hasNext() ? scanner.next() : "";
	        JSONObject jsonObject = JSONObject.parseObject(body);
	        Integer status = jsonObject.getInteger("status");
	        System.out.println("status----->"+status);
	        if (status == 2 || status == 3 || status == 6) {//6=强制保存
	        	
	            String downloadUri = jsonObject.getString("url");
	            URL url = new URL(downloadUri);
	            HttpURLConnection connection = (java.net.HttpURLConnection) url.openConnection();
	            InputStream stream = connection.getInputStream();
	            //查询附件信息，以获取附件存储路径
	            SysFileEntity fileInfo = filePreviewService.getFileListByid(fileid);
	    		String path = fileInfo.getPath();
	    		if (!path.startsWith("/")) {
	    			path =  uploadPath + "/" + path;
	    		} else {
	    			path = uploadPath + path;
	    		}
	    		System.out.println("保存文件-->"+path);
	    		File savedFile = new File(path);
	    		if (!savedFile.exists()) {
	    			return  "{\"error\":-1}";
	    		}
	            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();
	            
	               //保存版本信息
	    		if(status!=6) {
	    			String officeCache = uploadPath+"/officeCache/";
		            File folder = new File(officeCache);
		            if(!folder.exists()) {
		            	folder.mkdirs();
		            }
		            
		            Officelog log = newLog(fileid,jsonObject);
		        	log.setNames(names);
		            
		            String historyUrl = log.getKey()+"_"+log.getVersion()+"."+log.getFiletype();
		            String historyzip = log.getKey()+"_"+log.getVersion()+".zip";
		            FileUtil.copy(path, officeCache+historyUrl, true);
		            
		            URL zipurl = new URL(log.getChangesurl());
		            HttpURLConnection connectionzip = (java.net.HttpURLConnection) zipurl.openConnection();
		            InputStream zipstream = connectionzip.getInputStream();
		            try (FileOutputStream out2 = new FileOutputStream(officeCache+historyzip)) {
		                int read;
		                final byte[] bytes = new byte[1024];
		                while ((read = zipstream.read(bytes)) != -1) {
		                	out2.write(bytes, 0, read);
		                }
		                out2.flush();
		            }
		            connectionzip.disconnect();
		            
		            
		            SysFileEntity urlfile =  new SysFileEntity();
		            BeanUtil.copyProperties(fileInfo, urlfile);
		            urlfile.setId(null);
		            urlfile.setExt1(fileInfo.getId().toString());
		            urlfile.setPath("officeCache/"+historyUrl);
		            urlfile.setSize(new BigDecimal(FileUtil.size(new File(officeCache+historyUrl))));
		            sysFileDao.save(urlfile);
		            
		            
		            SysFileEntity changesurlFile =  new SysFileEntity();;
		            BeanUtil.copyProperties(fileInfo, changesurlFile);
		            changesurlFile.setId(null);
		            changesurlFile.setExt1(fileInfo.getId().toString());
		            changesurlFile.setFileName(historyzip);
		            changesurlFile.setPath("officeCache/"+historyzip);
		            changesurlFile.setSuffix("zip");
		            changesurlFile.setSize(new BigDecimal(FileUtil.size(new File(officeCache+historyzip))));
		            sysFileDao.save(changesurlFile);
		            
		            log.setUrlFileId(urlfile.getId());
		            log.setChangesurlFileId(changesurlFile.getId());
		            
		            officelogDao.save(log);
	    		}
	            
	            
	        }
	        return  "{\"error\":0}";
	    } catch (IOException e) {
	    	return  "{\"error\":-1}";
	    }
	    
	}
	
	private String formatTime(String str) {
 		Instant instant = Instant.parse(str);
 		DateTimeFormatter formatter = DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm:ss");
 		ZoneId zoneId = ZoneId.of("UTC");
 		String formatterTime = formatter.format(instant.atZone(zoneId));
 		return formatterTime;
	}

	private Officelog newLog (Long fileid,JSONObject jsonObject) {
		Officelog prelog = officelogDao.getprelog(fileid);
		Integer version = 1;
		String prekey ="";//上一版本key
		String preurl ="";//上一版本url
		Long preurlFileId = null;
		if(prelog!=null) {
			version = prelog.getVersion()+1;
			prekey = prelog.getKey();
			preurl = prelog.getUrl();
			preurlFileId = prelog.getUrlFileId();
		}
		
		String filetype = jsonObject.getString("filetype");
		String lastsave = jsonObject.getString("lastsave");
		String formatterTime = formatTime(lastsave);
		String changesurl = jsonObject.getString("changesurl");
		String key = jsonObject.getString("key");
		String url = jsonObject.getString("url");
		String status = jsonObject.getString("status");
		JSONArray actions = jsonObject.getJSONArray("actions");
		JSONObject action = actions.getJSONObject(0);
		String userid = action.getString("userid");
		JSONObject historys = jsonObject.getJSONObject("history");
		String serverVersion = historys.getString("serverVersion");
		String forcesavetype = jsonObject.getString("forcesavetype");
		
		
		Officelog log = new Officelog();
		log.setFileid(fileid);
		log.setVersion(version);
		log.setPrekey(prekey);
		log.setPreurl(preurl);
		log.setPreurlFileId(preurlFileId);
		log.setFiletype(filetype);
		log.setLastsave(formatterTime);
		log.setChangesurl(changesurl);
		log.setKey(key);
		log.setUrl(url);
		log.setStatus(status);
		log.setUserid(userid);
		log.setServerVersion(serverVersion);
		log.setForcesavetype(forcesavetype);
		
		return log;
	}
	
}

wangping8040
关注
文档管理系统OnlyOffice在线编辑功能
TeemlinkMarket的博客
11-30 3703
随着信息化时代的发展，越来越多的企业需求文档在线协作功能，正是在此趋势下，天翎知识文档管理系统联合OnlyOffice插件满足企业在线协同的需求，插件部署到服务器后，系统操作用户直接在浏览器操作即可实现在线编辑操作，无需额外在用户操作电脑中安装插件。
在若依前后端分离项目中集成 ONLYOFFICE 以实现在线预览、编辑和协作功能
最新发布
记录学习编程的日常
04-30 912
ONLYOFFICE 是一款开源的在线文档编辑套件，可实现文档预览、编辑、协作与转换等功能，可通过 Docker 部署 DocumentServer 服务，并通过 HTTP API 或 WOPI 接口与第三方系统集成。在 RuoYi 前后端分离项目（RuoYi-Vue）中集成 ONLYOFFICE，可使系统具备高效的在线文档处理能力，并保持与现有微服务架构的无缝衔接。通过上述步骤，您即可在 RuoYi 前后端分离项目中无缝集成 ONLYOFFICE，实现文档的在线预览、编辑与多人协作。
ONLYOFFICE历史版本开发技术之二
hotqin888的专栏
03-25 3637
 1.它只支持word的历史版本，PowerPoint和Excel不支持历史版本。Document historyIf the document has been previouslyedited using Document Editor, you can view the document history.The history iscurrently available for text d...
onlyoffice历史版本功能实现
hongkid的专栏
10-09 4315
onlyoffice历史版本功能实现
ONLYOFFICE历史版本功能的开发技术之一
hotqin888的专栏
03-11 4313
https://api.onlyoffice.com/editors/history上面的页面介绍如何进行历史版本功能的开发。https://api.onlyoffice.com/editors/howitworks上面介绍了onlyoffice document server所包含的功能，The client side includes:Document manager - the list o...
使用onlyoffice让你轻松实现word、ppt、excel在线编辑功能
IT学习小镇
01-16 3万+
了解onlyofficeONLYOFFICE Docs是一个开源办公套件，包括文本文档、电子表格和演示文稿的编辑器。它提供以下功能：1、创建、编辑和查看文本文档、...
onlyoffice 在线编辑
江河君的博客
06-21 4683
文章目录一、拉取镜像,启动二、配置onlyoffice三、编写保存接口四、添加中文字体 一、拉取镜像,启动 要使用onlyoffice的在线编辑,需要从docker拉取镜像 onlyoffice/documentserver docker pull onlyoffice/documentserver 启动onlyoffice docker run -i -t -d -p 8000:80 onlyoffice/documentserver 查看日志 docker logs -f --tail=100 [容
基于OnlyOffice集成的Java、HTML、JavaScript文档在线编辑功能设计源码
10-03
本项目的目标是集成OnlyOffice这一开源办公套件，通过Java后端与HTML和JavaScript前端的结合，实现一个具有协同编辑功能的在线文档编辑器。OnlyOffice是一个功能强大的文档处理软件，它支持多种文档格式，包括常见的...
onlyoffice在线编辑器演示项目
04-19
ONLYOFFICE是一款强大的在线协作办公套件，它提供了文档、表格和演示文稿的编辑功能，支持多种格式，并且可以实现团队间的实时协作。本篇文章将深入探讨ONLYOFFICE在线编辑器的特性、工作原理以及在实际项目中的应用...
ONLYOFFICE Docs集成案例
10-11
1. 在线文档编辑：ONLYOFFICE Docs支持在线文档编辑，用户可以实时编辑和分享文档。 2. 多种文档格式支持：ONLYOFFICE Docs支持多种文档格式，包括文本、表格、演示文稿等。 3. 实时协作：ONLYOFFICE Docs支持实时...
SpringBoot项目集成ONLYOFFICE
球球！？
04-23 4720
SpringBoot项目集成ONLYOFFICE
office在线编辑ONLYOFFICE集成java和前端
10-09
office在线编辑ONLYOFFICE集成java和前端office在线编辑ONLYOFFICE集成java和前端office在线编辑ONLYOFFICE集成java和前端office在线编辑ONLYOFFICE集成java和前端office在线编辑ONLYOFFICE集成java和前端
ONLYOFFICE-OnlineEditors:ONLYOFFICE-在线编辑器
07-06
ONLYOFFICE 在线编辑器是免费的开源编辑器，包括文本、电子表格和演示文稿的查看器和编辑器，是第一款基于画布的文档编辑器。 它们在浏览器、协作编辑和评论中提供最高的格式质量。 这个版本可以部署在你自己的服务器上。 概述 ONLYOFFICE 在线编辑器是在 GNU Affero 通用公共许可证下分发的可免费下载的开源版本。 功能 它包括文本、电子表格和演示文稿的查看器和编辑器，包括： ONLYOFFICE 文档编辑器 ONLYOFFICE 电子表格编辑器 ONLYOFFICE 演示文稿编辑器 项目信息 官网： : 代码库： : 许可证： SaaS 版本： : 文档 您可以编译 ONLYOFFICE 在线编辑器并将其安装到您的本地服务器上，或者使用我们的安装程序跳过编译阶段并为您安装。 以下文档可供社区使用，具体取决于您选择的方式：
windows+onlyoffice部署.zip
04-12
OnlyOffice提供了类似于Microsoft Office的在线编辑体验，支持多种文件格式，并且能够无缝集成到DocSys系统中，实现文件的在线预览、编辑、权限管理以及版本控制等功能。 首先，让我们了解OnlyOffice的核心功能。...
ONLYOFFICE历史版本开发技术之四
hotqin888的专栏
08-03 2302
ONLYOFFICE历史版本开发技术之一 ONLYOFFICE历史版本开发技术之二 ONLYOFFICE历史版本开发技术之三 继昨天打包好onlyoffice5.3.4版本后，本想将engineercms的历史版本功能完善，也就是将历史版本的word和changes都从document server上保存到cms服务器上。 因为发现昨天打的包，回调的参数错误，意外地看了一下历史版本功能。 ...
onlyoffice实现office文件在线编辑保存
椰汁菠萝
03-28 1608
onlyoffice是开源的在线文档编辑软件，支持主流的office格式，可实现文档在线编辑保存，多人协作编辑等场景，是目前我用过的功能最完善且强大的在线office编辑软件；
onlyoffice+vue实现在线预览在线编辑
热门推荐
X_WZJ的博客
04-11 3万+
vue整合onlyOffice实现文档在线预览编辑
使用onlyOffice在线预览编辑，word，表格。
zsm__zsm的博客
12-11 517
使用onlyOffice在线预览编辑，word，表格。
onlyOffice实践-在线协同word、ppt、excel编辑
冯斌
01-10 1699
在线编辑onlyoffice环境搭建
OnlyOffice在线编辑器演示项目详解
开发者可以通过调用OnlyOffice提供的API来实现文档的在线编辑、查看等功能。这样的集成通常涉及到前后端的交互，前端提供用户界面，后端处理逻辑和与OnlyOffice文档服务器的通信。 知识点六：OnlyOffice的安装和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值