zdppy+onlyoffice+vue3解决文档加载和文档强制保存时弹出警告的问题

解决过程

第一次排查

最开始排查的是官方文档说的 https://api.onlyoffice.com/editors/troubleshooting#key 解决方案。参考的是官方的  https://github.com/ONLYOFFICE/document-server-integration/releases/latest/download/Python.Example.zip 基于Django的Python代码。

Python代码如下：

这次排查，确保我们的回调地址是能用的，返回的也是 {"error": 0}，但是没用！！！

第二次排查

找到了一个 SpringBoot的项目，参考了如下代码：

通过上面的代码我们发现，它的返回的类型不是JSON类型，而我们原本的返回类型是JSON类型，所以做了一个尝试，将我们的返回类型改成了纯文本类型。

data = {"error": 0}

# return JSONResponse('{"error":0}')

# return JSONResponse(json.dumps(data))

return PlainTextResponse(json.dumps(data))

经过实测，问题就出在这里。必须要返回纯文本类型！！！！

最终代码

后端

import json

import req

import api

from api import middleware, PlainTextResponse

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/test.docx")

if data.get("status") == 6:

req.download(data.get("url"), "data/test.docx")

# status == 6 文档编辑会话关闭

data = {"error": 0}

# return JSONResponse('{"error":0}')

# return JSONResponse(json.dumps(data))

return PlainTextResponse(json.dumps(data))

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=18888)

前端

import {message} from "ant-design-vue";

const onLoadDocumentClick = () => {

message.success("load document")

// isDocument.value = true

const docEditor = new DocsAPI.DocEditor("doc", {

"document": {

"fileType": "docx",

"key": `Khirz6zTPdfd7`,

"title": "Example Document Title.docx",

"url": "http://192.168.234.138:18888/dist/test.docx"

},

"editorConfig": {

"callbackUrl": "http://192.168.234.138:18888/callback",

"lang": "zh-CN",

"user": {

"id": "1",

"name": "zdp"

},

"customization": {

"forcesave": true,

},

"coEditing": {

"mode": "fast",

"change": true

},

},

"documentType": "word",

height: '500px',

width: '100%',

token: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJkb2N1bWVudCI6eyJmaWxlVHlwZSI6ImRvY3giLCJrZXkiOiJLaGlyejZ6VFBkZmQ3IiwidGl0bGUiOiJFeGFtcGxlIERvY3VtZW50IFRpdGxlLmRvY3giLCJ1cmwiOiJodHRwOi8vMTkyLjE2OC4yMzQuMTM4OjE4ODg4L2Rpc3QvdGVzdC5kb2N4In0sImVkaXRvckNvbmZpZyI6eyJjYWxsYmFja1VybCI6Imh0dHA6Ly8xOTIuMTY4LjIzNC4xMzg6MTg4ODgvY2FsbGJhY2siLCJsYW5nIjoiemgtQ04iLCJ1c2VyIjp7ImlkIjoiMSIsIm5hbWUiOiJ6ZHAifSwiY3VzdG9taXphdGlvbiI6eyJmb3JjZXNhdmUiOnRydWV9LCJjb0VkaXRpbmciOnsibW9kZSI6ImZhc3QiLCJjaGFuZ2UiOnRydWV9fSwiZG9jdW1lbnRUeXBlIjoid29yZCIsImhlaWdodCI6IjUwMHB4Iiwid2lkdGgiOiIxMDAlIn0.vnSYKU22-IsBmuoSn5Po-Ukz1RrnM-G3ch3-JuJd1xg",

});

}

<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>