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类型,所以做了一个尝试,将我们的返回类型改成了纯文本类型。

python 复制代码
    data = {"error": 0}
    # return JSONResponse('{"error":0}')
    # return JSONResponse(json.dumps(data))
    return PlainTextResponse(json.dumps(data))

经过实测,问题就出在这里。

必须要返回纯文本类型!!!!

最终代码

后端

python 复制代码
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)

前端

html 复制代码
<script setup>
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",
  });

}
</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>
相关推荐
爱看书的小沐16 小时前
【小沐杂货铺】基于Three.js渲染三维风力发电机(WebGL、vue、react、WindTurbine)
javascript·vue.js·webgl·three.js·opengl·风力发电机·windturbine
叶凡要飞16 小时前
RTX5060Ti安装双系统ubuntu22.04各种踩坑点(黑屏,引导区修复、装驱动、server版本安装)
人工智能·python·yolo·ubuntu·机器学习·操作系统
yuluo_YX16 小时前
VSR 项目解析
人工智能·python
计算衎17 小时前
python通过win32com库调用UDE工具来做开发调试实现自动化源码,以及UDE的知识点介绍
python·c/c++·pywin32·ude·com api
Full Stack Developme17 小时前
java.nio 包详解
java·python·nio
新手村领路人17 小时前
opencv gpu cuda python c++版本测试代码
python·opencv·cuda
高洁0118 小时前
大模型-高效优化技术全景解析:微调 量化 剪枝 梯度裁剪与蒸馏 下
人工智能·python·深度学习·神经网络·知识图谱
罚时大师月色18 小时前
Vue+ts 如何实现父组件和子组件通信
javascript·vue.js·ecmascript
white-persist18 小时前
CSRF 漏洞全解析:从原理到实战
网络·python·安全·web安全·网络安全·系统安全·csrf
fury_12318 小时前
vue3:数组的.includes方法怎么使用
前端·javascript·vue.js