onlyoffice历史版本功能实现

一:开启客户端配置

如果不开启,回调请求里面的history和changeUrl是空

二:客户端主要实现2个回调函数

1.实现onRequestHistory事件,该事件会在ui点击查看历史的时候发起,用于展示历史列表

关键在于获取到history的内容,调用refreshHistory方法

javascript 复制代码
docEditor.refreshHistory(// show the document version history
{
	currentVersion: "31",
	history: historyList
})

historyList 的数据结构

javascript 复制代码
[{
	"serverVersion": "7.4.0",//来源回调的history,第一个版本无需该字段
	"changes": [{//来源回调的history,第一个版本该字段为null
		"created": "2023-09-28 02:01:25",
		"user": {
			"id": "uid-2",
			"name": "group-2 xxx"
		}
	}, {
		"created": "2023-09-28 02:01:49",
		"user": {
			"id": "uid-3",
			"name": "group-3 Hamish Mitchell"
		}
	}],
	"key": "__ffff_200.200.170.119new.docx291695866450703",来源回调的key
	"version": 30,//需要自己维护
	"created": "2023-09-28 02:01:25",//自己维护,一般是打开文档的时候记录
	"user": {//自己维护,一般是打开文档的时候记录
		"id": "uid-2",
		"name": "group-2 xxx"
	}
}]

回调的数据结构如下(仅供参考)

javascript 复制代码
 {
  key: '1696822265751m4sq5vs50j',
  status: 2,
  url: 'http://xxx/cache/files/data/1696822265751m4sq5vs50j_9201/output.docx/output.docx?md5=jljJJVUlAm4pYX_6mvC_Lw&expires=1696823346&filename=output.docx',
  changesurl: 'http://xxxx/cache/files/data/1696822265751m4sq5vs50j_9201/changes.zip/changes.zip?md5=ivaLJ_lI0MK5nBdCqy8HLw&expires=1696823346&filename=changes.zip',
  history: { serverVersion: '7.4.0', changes: [ [Object] ] },
  users: [ '64773bdb97acf80031f4ef56' ],
  actions: [ { type: 0, userid: '64773bdb97acf80031f4ef56' } ],
  lastsave: '2023-10-09T03:33:46.000Z',
  notmodified: true,
  filetype: 'docx'
}

historyList 排序要求:按version升序排序

2.实现onRequestHistoryData事件,该事件会ui点击查看具体的某个历史的时候触发

关键在于获取某个版本的具体historyData,调用setHistoryData方法发起请求

javascript 复制代码
function onRequestHistoryData(data) {
		var version = data.data;//对应点击哪个版本
        docEditor.setHistoryData(historyData);
}

historyData的数据结构

javascript 复制代码
{
"fileType": "docx",
"version": 25,
"key": "xxxxxx",
"url": "http://xxxxx/history?fileName=new.docx&file=prev.docx&ver=25&useraddress=xxx",//当前版本下载的url
"directUrl": null,
"previous": {//上一个版本的信息,如果无上个版本,可以不要这个字段,例如第一个版本
	"fileType": "docx",
	"key": "new.docx231684394201684",
	"url": "http://xxx/history?fileName=new.docx&file=prev.docx&ver=24&useraddress=xxxx",
	"directUrl": null
},
"changesUrl": "http://xxxx&file=diff.zip&ver=24",//下载当前版本历史记录存储的diff.zip文件
"token": "eyJhbGciOiJIUzI1NiIsInR"//当条数据签名
}

三:服务端所有工作都是围绕实现上述的数据

1.处理onlyoffice发起的回调函数,将保存history信息,更新文件,保存历史文件,保存changeUrl的zip文件,刷新key

例如,刚新建个文件的时候就添加个历史记录版本是1,客户端编辑后,回调的处理,保存版本号是2的历史记录,创建个版本号是2的目录,里面存放上个版本的文件,和回调changeUrl里的文件,拼接historyData的changesUrl就用对应版本号里面对应的信息,url也是。changeUrl的内容是当前版本和上个版本的对比

2.实现getHistoryList接口,获取对应的historyList给到客户端用

3.实现getHistoryData接口,返回historyData给客户端用

4.实现download相关的接口,返回historyData里面url和changeUrl会下载到的文件

其他:

实现界面有关闭按钮:只需要在客户端实现onRequestHistoryClose函数里面执行location.reload()即可

相关推荐
Nicole-----1 分钟前
PySpark数据输入
python
JIngJaneIL8 分钟前
汽车租赁|基于Java+vue的汽车租赁系统(源码+数据库+文档)
java·vue.js·spring boot·汽车·论文·毕设·汽车租赁系统
扑克中的黑桃A12 分钟前
Python学习的自我理解和想法(27)
python
kymjs张涛22 分钟前
零一开源|前沿技术周刊 #15
前端·javascript·面试
渣哥24 分钟前
有一天,我和 CopyOnWriteArrayList 杯“线程安全”的咖啡
java
古夕24 分钟前
Vue3 + vue-query 的重复请求问题解决记录
前端·javascript·vue.js
不知名程序员第二部24 分钟前
前端-业务-架构
前端·javascript·代码规范
华仔啊25 分钟前
面试官:请解释一下 JS 的 this 指向。别慌,看完这篇让你对答如流!
前端·javascript
小高00727 分钟前
💥💥💥前端“隐藏神技”:15 个高效却鲜为人知的 Web API 大起底
前端·javascript
flyliu27 分钟前
再再次去搞懂事件循环
前端·javascript