首页 > 其他分享 >zdppy+onlyoffice+vue3解决文档加载和文档强制保存时弹出警告的问题

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

时间:2024-07-12 21:01:46浏览次数:19  
标签:docx return json zdppy api 文档 vue3 import data

解决过程

第一次排查

最开始排查的是官方文档说的 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)

前端

<script setup>
import {message} from "ant-design-vue";

const onl oadDocumentClick = () => {
  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>

标签:docx,return,json,zdppy,api,文档,vue3,import,data
From: https://blog.csdn.net/qq_37703224/article/details/140279901

相关文章

  • Vue2与Vue3的区别
    Vue2官方已经发布不再维护了,很多公司也开始纷纷使用vue3了。那么vue3和vue2有哪些不同呢?vue3(下面简称v3)又在vue2(下面简称v2)上做了哪些拓展与改进呢?(1)首先最大的区别是数据双向绑定的改进,v2用的是es5的数据劫持Object.definedProperty,这个会一开始就给所有的数据设置了监听,比......
  • 适合小白学校的springboot2 vue3 图书管理系统idea开发mysql数据库
    博主介绍:专注于Java.net phpphython 小程序等诸多技术领域和毕业项目实战、企业信息化系统建设,从业十五余年开发设计教学工作☆☆☆精彩专栏推荐订阅☆☆☆☆☆不然下次找不到哟我的博客空间发布了1000+毕设题目方便大家学习使用感兴趣的可以先收藏起来,还有大家在......
  • 【计算机毕业设计】基于Springboot的智能物流管理系统【源码+lw+部署文档】
    包含论文源码的压缩包较大,请私信或者加我的绿色小软件获取免责声明:资料部分来源于合法的互联网渠道收集和整理,部分自己学习积累成果,供大家学习参考与交流。收取的费用仅用于收集和整理资料耗费时间的酬劳。本人尊重原创作者或出版方,资料版权归原作者或出版方所有,本人不对所......
  • 用Vue3和Plotly.js实现3D小提琴图的交互式可视化
    本文由ScriptEcho平台提供技术支持项目地址:传送门小提琴图:绘制性别账单分布应用场景小提琴图是一种数据可视化工具,用于比较不同组别的分布。它结合了箱线图和核密度估计,可以直观地展示数据的中心趋势、离散度和分布形状。小提琴图常用于比较不同性别、年龄组或其他类别......
  • 易优cms网站videoplay功能:该标签仅限于视频模型的文档,用于在线播放视频选集列表里的第
    videoplay视频在线播放 [基础用法]名称:videoplay功能:该标签仅限于视频模型的文档,用于在线播放视频选集列表里的第一个视频。    (温馨提示:如果一篇视频文档有多个选集视频,可以同时使用【videolist视频选集列表】标签,进行视频切换播放。)语法:{eyou:videoplayaid='文档ID'......
  • vue3前端项目结构解析(2024-07-12)
    .├──build#打包脚本相关│  ├──config#配置文件│  ├──generate#生成器│  ├──script#脚本│  └──vite#vite配置├──mock#mock文件夹├──public#公共静态资源目录├──src#主目录│  ├──api#接口......
  • vue3项目中浏览器打开本地文档或者下载本地应用的方法(2024-07-11)
    在public文件夹下面加入预览的文件【操作说明文档】。public文件夹包含了应用程序的入口HTML文件,以及其他不需要经过编译的静态文件此文件夹不会压缩并且路径不变,所以是最佳的存放文件的位置。代码:<template><n-icontitle="操作文档"style="cursor:pointer;margin-......
  • 【java计算机毕设】线上花店销售商城系统java MySQL ssm JSP maven项目代码源码+文档p
    目录1项目功能2项目介绍3项目地址 1项目功能【java计算机毕设】线上花店销售商城系统MySQLssmJSPmaven项目代码源码+文档PPT小组设计代码 2项目介绍系统功能:线上花卉小铺系统包括管理员、用户俩种角色。用户端:1.注册登录:游客填写基础信息,注册成为小铺用......
  • 毕业设计之python语音数据及标注核对审核系统设计与实现(python完整源码+说明文档+演示
    1项目介绍基于python的语音标注及审核系统的目的就是在于建立属于自己的一套识别系统,在日常的工作中,语音识别是一件非常重要的事情,比如说企业或事业单位当中。自动整理语音数据,保存到数据库当中,实现数据对应一致性,这样可以很大程度地进行数据的校验。2、项目技术项目后......
  • 最新AI一站式系统源码-ChatGPT商业版系统源码,支持自定义AI智能体应用、AI绘画、AI视频
     一、前言人工智能语言模型和AI绘画在多个领域都有广泛的应用.....SparkAi创作系统是一款基于ChatGPT和Midjourney开发的智能问答和绘画系统,提供一站式AIB/C端解决方案,涵盖AI大模型提问、AI绘画、AI视频、文档分析、图像识别和理解、TTS&语音识别、AI换脸等多项功能。......