思路
1、使用zdppy_api开发文档存储服务
2、使用zdppy_api开发一个文档服务的回调接口
3、使用docker启动onlyoffice作为文档服务
4、使用vue开发前端界面
5、使用vue实现加载文档并编辑,之后关闭页面,大约10秒以后,会自动触发回调,通知zdppy_api开发的文档服务接口,status为2,同时会有一个url是文档地址
{'key': 'Khirz6zTPdfd7', 'status': 2, 'url': 'http://127.0.0.1:8080/cache/files/data/Khirz6zTPdfd7_4862/output.docx/output.docx?md5=MX_nf_TezDs5dhZE9o9cNQ&expires=1719734135&shardkey=Khirz6zTPdfd7&filename=output.docx', 'history': {}, 'users': ['uid-1719408360675'], 'actions': [{'type': 0, 'userid': 'uid-1719408360675'}], 'lastsave': '2024-06-30T07:37:12.000Z', 'notmodified': False, 'filetype': 'docx'}
6、可以访问url实现后续保存文件的逻辑。
使用docker部署onlyoffice
加载镜像:
docker load -i docserver:7
运行容器:
docker run -itd -p 8080:80 --name docserver -e JWT_ENABLED=false --restart=always onlyoffice/documentserver:8
开发文档存储服务
import json
import req
import api
from api import middleware
from api.zjson.response import JSONResponse
async def doc_callback(request):
data = await api.req.get_json(request)
print("callback === ", data)
# status == 2 文档准备好被保存
if data.get("status") == 2:
req.download(data.get("url"), "data/test2.docx")
# status == 6 文档编辑会话关闭
return JSONResponse(json.dumps({"error": 0}))
app = api.Api(
routes=[
api.resp.dir_route("/dist", "data"),
api.resp.post("/callback", doc_callback),
],
middleware=[middleware.cors()],
)
if __name__ == "__main__":
app.run(port=18889)
前端文件编辑
<script setup>
import {message} from "ant-design-vue";
const onLoadDocumentClick = () => {
message.success("load document")
// isDocument.value = true
new DocsAPI.DocEditor("doc", {
"document": {
"fileType": "docx",
"key": "Khirz6zTPdfd7",
"title": "Example Document Title.docx",
"url": "http://192.168.234.138:18889/dist/test.docx"
},
"editorConfig": {
"callbackUrl": "http://192.168.234.138:18889/callback"
},
"documentType": "word",
height: '700px',
width: '100%'
});
}
</script>
<template>
<div class="bg-indigo-50 p-8 min-h-screen">
<div class="bg-amber-200 p-8">
<a-button type="primary" @click="onLoadDocumentClick">Load Document</a-button>
</div>
<div class="bg-amber-400 p-8 min-h-96">
<div id="doc">doc</div>
</div>
</div>
</template>
总结
整体的开发流程:
- 1、通过点击按钮打开一篇文档进行编辑,编辑的内容会同步发送到onlyoffice文档编辑服务
- 2、当我们编辑完毕,关闭文档大约10秒以后,onlyoffice文档编辑服务会通过回调函数通知zdppy_api开发的文档存储服务,此时status为2,同时还有一个url记录了临时保存的文档,由文档存储服务自己决定将文档如何进行后续的存储