思路

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记录了临时保存的文档，由文档存储服务自己决定将文档如何进行后续的存储