使用zdppy_api+onlyoffice word文档在线共同编辑,附完整的vue3前端代码和python后端代码

参考文档:
https://api.onlyoffice.com/zh/editors/basic
https://api.onlyoffice.com/zh/editors/coedit

基本的架构思考:

  • 文档表:记录的是文档信息
    • key:这个key可以标识唯一的一个文档,可以是文档的hash值
    • fileType:文档的类型,docx,txt,pdf,其他
    • title:文档的标题,也就是文档的实际的名称,比如 test.docx
    • url:这个非常关键,应该是一个文档存储服务提供的地址,通过这个地址能够下载文档
  • 用户表:
    • id
    • name:用户名

我们在共同编辑的时候,每个用户可以打开不同的文档,也可以打开同一个文档。我们在调用打开文档的方法的时候,一定记得配置用户信息,比如:
在这里插入图片描述

如果要实现协同编辑(编辑实时生效),应该做如下配置:
在这里插入图片描述

简单的实现思路:

  • 1、打开两个tab标签,每个标签都输入前端地址,相当于访问同一个界面
  • 2、第一个tab标签打开加载文档,用户的参数填张三
  • 3、第二个tab标签打开加载文档,用户的参数填李四
  • 4、开启文档的协同编辑模式
  • 5、分别在两个tab页面对同一个文档进行编辑,观察效果

另外一个问题:如何使得加载同一个文档,但是用户不一样?

  • 生成随机的ID
  • 生成随机的用户名

实现协同编辑的vue3完整代码如下:

<script setup>
import {message} from "ant-design-vue";const onLoadDocumentClick = () => {message.success("load document")// isDocument.value = truenew DocsAPI.DocEditor("doc", {"document": {"fileType": "docx","key": `Khirz6zTPdfd7`,"title": "Example Document Title.docx","url": "http://127.0.0.1:18889/dist/test.docx"},"editorConfig": {"callbackUrl": "http://127.0.0.1:18889/callback","lang": "zh-CN","user": {"id": `001-${Math.random()}`,"name": `zdp-${Math.random()}`},"customization": {"forcesave": true,},"coEditing": {"mode": "fast","change": true},},"documentType": "word",height: '500px',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>

在文档编辑界面中,我们也确实可以看到,有两个用户同时在对同一个文档做编辑:
在这里插入图片描述

经过实际的测试,A用户编辑文件的时候,B用户能够实时的看到文档的编辑结果,并且能够查看到是哪个用户在对文档做编辑。

A用户输入ctrl+s保存的时候,文档会被实时保存。当A用户和B用户先后重新加载文档的时候,看到的都是实时保存之后的文档。

配套的后端代码如下:

import json
import reqimport api
from api import middleware
from api.zjson.response import JSONResponseasync 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 文档编辑会话关闭return JSONResponse("{\"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)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/38752.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

HttpServletResponse设置headers返回,发现headers中缺少“Content-Length“和“Content-Type“两个参数。

业务中需要将用httpUtils请求返回的headers全部返回&#xff0c;塞到HttpServletResponse中&#xff0c;代码如下&#xff1a; HttpServletResponse response;// 返回headers Arrays.stream(httpResponse.getHeaders()).forEach(header -> response.setHeader(header.getNa…

SM2加密的密文byte数组与ASN.1互转

ASN.1抽象语言标记(Abstract Syntax Notation One) ASN.1是一种 ISO/ITU-T 标准,描述了一种对数据进行表示、编码、传输和解码的数据格式,它提供了一整套正规的格式用于描述对象的结构。 一、该结构的应用场景 例如在做待签名的数字信封时,数字信封使用ASN.1封装,其中对…

MySQL的简介和安装目录

今日总结到此结束&#xff0c;拜拜&#xff01;

写代码,为什么还需要作图?

引言 古人云 &#xff1a;一图胜千言&#xff0c;闲人说&#xff1a;无图无真相。 在日常的聊天工具当中&#xff0c;无论是使用微信&#xff0c;还是钉钉。使用图片或表情包的频次越来越高&#xff0c;那是为什么呢&#xff1f;其实在互联网没有那么发达的时候&#xff0c;我…

QAnything接口文档

QAnything接口主要包括7个接口&#xff1a;新建知识库、查看知识库、删除知识库&#xff1b;上传文件、获取文件列表、删除文件&#xff1b;问答。 一.新建知识库&#xff08;POST&#xff09; 1.URL http://{your_host}:8777/api/local_doc_qa/new_knowledge_base2.请求参数…

【Linux】:命令行参数

朋友们、伙计们&#xff0c;我们又见面了&#xff0c;本期来给大家解读一下有关Linux命令行参数的相关知识点&#xff0c;如果看完之后对你有一定的启发&#xff0c;那么请留下你的三连&#xff0c;祝大家心想事成&#xff01; C 语 言 专 栏&#xff1a;C语言&#xff1a;从入…

禹神electron学习~

最近时间比较富裕 咱们浅浅来学习下electron 视频在这禹神&#xff1a;一小时快速上手Electron&#xff0c;前端Electron开发教程_哔哩哔哩_bilibili 先看下流程模型 先决条件 首先第一步 查看你的node和npm版本 创建你的应用 创建一个文件夹 我创建的名称为my-electron-…

Transformer动画讲解 - 工作原理

Transformer模型在多模态数据处理中扮演着重要角色,其能够高效、准确地处理包含不同类型(如图像、文本、音频、视频等)的多模态数据。 Transformer工作原理四部曲:Embedding(向量化)、Attention(注意力机制)、MLPs(多层感知机)和Unembedding(模型输出)。 阶段一:…

机器人控制系列教程之任务空间运动控制器搭建(2)

Simulink中的实例 推文《机器人控制系列教程之任务空间运动控制器搭建(1)》中&#xff0c;我们详细的讲解了Simulink中的taskSpaceMotionModel模块&#xff0c;实现的方式可以按照如下的步骤。 可以控制器模型替换为taskSpaceMotionModel模块后&#xff0c;该模块的输入分别为…

git 命令之 stash 命令详解

Git Stash 命令详解 在 Git 版本控制系统中&#xff0c;git stash 命令是开发者们的一个强大工具&#xff0c;它允许开发者保存当前工作目录的修改&#xff0c;以便稍后能够重新应用这些修改。这在需要切换分支或处理紧急任务时非常有用&#xff0c;因为它可以帮助开发者保持工…

501、二叉搜索树中的众数

给你一个含重复值的二叉搜索树&#xff08;BST&#xff09;的根节点 root &#xff0c;找出并返回 BST 中的所有 众数&#xff08;即&#xff0c;出现频率最高的元素&#xff09;。如果树中有不止一个众数&#xff0c;可以按 任意顺序 返回。 假定 BST 满足如下定义&#xff1…

周报 | 24.6.24-24.6.30文章汇总

为了更好地整理文章和发表接下来的文章&#xff0c;以后每周都汇总一份周报。 程序员学长 | 快速学会一个算法&#xff0c;Transformer&#xff08;下&#xff09;-CSDN博客 周报 | 24.6.17-24.6.23文章汇总-CSDN博客 python | NLTK&#xff0c;一个强大的 自然语言处理 Pyt…

Redis面试合集

概念 Redis是一种key-value型非关系数据库。 特点&#xff1a; 1、速度快&#xff0c;存在于内存中&#xff0c;类似于HashMap&#xff0c;HashMap的操作和查找的时间复杂度都是O(1) 2、支持丰富的数据类型&#xff0c;包括字符串、哈希、列表、集合、有序集合五种数据类型…

解锁跨境电商新边界:Temu API接口深度解析引言

引言 在竞争激烈的跨境电商领域&#xff0c;高效、精准的数据获取成为商家制胜的关键。Temu&#xff08;拼多多跨境电商&#xff09;作为行业内的新秀&#xff0c;其API接口服务为商家提供了强大的数据交互能力&#xff0c;尤其是其获取商品详情的核心功能&#xff0c;更是为商…

Python 文件操作

文件编码 将文件的内容翻译为二进制 文件操作 打开文件 open函数 语法&#xff1a; open(name, mode, encoding)name&#xff1a;文件名的字符串&#xff0c;可以包含具体路径。若没有路径&#xff0c;则默认为与py文件位于同一层 mode&#xff1a;打开文件的模式&#xf…

新质生产力最新测算(Shp/dta/xcel格式,2012-2022年)

数据简介&#xff1a;参考学者蔡湘杰、贺正楚的做法、我们通过收集数据构建了如下所示的衡量新质生产力的指标体系&#xff0c;但部分数据由于收集难度以及未公布等问题&#xff0c;部分数据有缺少&#xff0c;下面展示了部分原始数据&#xff0c;便于大家进行分析。 数据来源…

sql 的 update操作

sqlserver:在SQL Server中&#xff0c;你的UPDATE语句的语法需要稍微调整一下。你不能直接在SET子句之后立即跟INNER JOIN。正确的语法是将JOIN操作放在UPDATE和SET之间。以下是正确的写法&#xff1a; UPDATE test_item SET test_item.s1no subcontractor.s1no FROM test_it…

【PYG】简单分析Planetoid()中存储Cora数据集边的数量

文章目录 这得分析cora.cites原始文件步骤示例代码输出解释分析 chagpt生成的第一个版本答案&#xff0c;打印数据集的部分可以看下输出解释进一步验证总结 chatgpt生成的第二个版本答案检查 Cora 数据集的边输出解释检查边的方向性解释进一步优化运行结果解释 chagpt生成的第三…

RedHat9 | 内部YUM本地源服务器搭建

服务器参数 标识公司内部YUM服务器主机名yum-server网络信息192.168.37.1/24网络属性静态地址主要操作用户root 一、基础环境信息配置 修改主机名 [rootyum-server ~]# hostnamectl hostname yum-server添加网络信息 [rootyum-server ~]# nmcli connection modify ens160 …

mac 安装cnpm 淘宝镜像记录

mac 安装cnpm 淘宝镜像记录 本文介绍了在安装cnpm时遇到权限问题的解决方案&#xff0c;包括使用sudo&#xff0c;处理SSL证书过期&#xff0c;以及因版本不一致导致的错误处理方法&#xff0c;步骤包括设置npm配置、卸载和重新安装cnpm到特定版本。 安装 npm install cnpm …