onlyoffice实现打开文档的功能
后端代码
import api
from api import middlewareasync def doc_callback(request):data = await api.req.get_json(request)print("callback === ", data)# status == 2 文档准备好被保存# status == 6 文档编辑会话关闭return api.resp.success()app = api.Api(routes=[api.resp.dir_route("/", "data"),api.resp.post("/doc/callback", doc_callback),],# middleware=[middleware.cors()],
)if __name__ == "__main__":app.run(port=18889)
前端代码
<script setup>
import {DocumentEditor} from "@onlyoffice/document-editor-vue";const config = {document: {fileType: "docx",key: "Khirz6zTPdfd7",title: "Example Document Title.docx",url: "http://192.168.234.138:18889/test.docx"},documentType: "word",editorConfig: {callbackUrl: "http://192.168.234.138:18889/doc/callback",lang: 'zh-CN', // 设置语言 en / zh-CN},height: '700px',width: '100%'
}const onDocumentReady = () => {console.log("Document is loaded");
}const onLoadComponentError = (errorCode, errorDescription) => {switch (errorCode) {case -1: // Unknown error loading componentconsole.log(errorDescription);break;case -2: // Error load DocsAPI from http://documentserver/console.log(errorDescription);break;case -3: // DocsAPI is not definedconsole.log(errorDescription);break;}
}
</script><template><DocumentEditorid="docEditor"documentServerUrl="http://192.168.234.138:8080":config="config":events_onDocumentReady="onDocumentReady":onLoadComponentError="onLoadComponentError"/>
</template>
打开文档案例
有个按钮,点击这个按钮,打开指定的文档。
实现思路
1、有个首页
2、首页里面有个按钮
3、点击按钮跳转到文档页面
实现方案
1、引入vue-router
2、定义index首页
3、定义document文档页面
4、通过vue-router自带的路由跳转,实现点击跳转页面
完整代码
package.json
{"name": "zdpvue_docclient","private": true,"version": "0.0.0","type": "module","scripts": {"dev": "vite","build": "vite build","preview": "vite preview"},"dependencies": {"@onlyoffice/document-editor-vue": "^1.4.0","ant-design-vue": "^4.2.3","vue": "^3.4.29","vue-router": "^4.4.0"},"devDependencies": {"@vitejs/plugin-vue": "^5.0.5","vite": "^5.3.1"}
}
src/main.js
import {createApp} from 'vue'
import router from "./router"import 'ant-design-vue/dist/reset.css';
import Antd from 'ant-design-vue';import App from './App.vue'const app = createApp(App)
app.use(router)
app.use(Antd)app.mount('#app')
src/App.vue
<template><router-view/>
</template>
src/router/index.js
import {createWebHistory, createRouter} from 'vue-router'import Index from '../page/index/index.vue'
import Document from '../page/document/index.vue'const routes = [{path: '/', component: Index},{path: '/document', component: Document},
]const router = createRouter({history: createWebHistory(),routes,
})export default router
src/page/index/index.vue
<script setup>
import {message} from "ant-design-vue";
import {useRouter} from "vue-router";const router = useRouter()
const onOpenDocumentClick = () => {message.success('This is a success message');router.push({ path: '/document', query: { key: 'abc' } })
}
</script>
<template><a-space wrap><a-button type="primary" @click="onOpenDocumentClick">Open Document</a-button></a-space>
</template>
src/page/document/index.vue
<script setup>
import {DocumentEditor} from "@onlyoffice/document-editor-vue";const config = {document: {fileType: "docx",key: "Khirz6zTPdfd7",title: "Example Document Title.docx",url: "http://192.168.234.138:18889/test.docx"},documentType: "word",editorConfig: {callbackUrl: "http://192.168.234.138:18889/doc/callback",lang: 'zh-CN', // 设置语言 en / zh-CN},height: '700px',width: '100%'
}const onDocumentReady = () => {console.log("Document is loaded");
}const onLoadComponentError = (errorCode, errorDescription) => {switch (errorCode) {case -1: // Unknown error loading componentconsole.log(errorDescription);break;case -2: // Error load DocsAPI from http://documentserver/console.log(errorDescription);break;case -3: // DocsAPI is not definedconsole.log(errorDescription);break;}
}
</script><template><DocumentEditorid="docEditor"documentServerUrl="http://192.168.234.138:8080":config="config":events_onDocumentReady="onDocumentReady":onLoadComponentError="onLoadComponentError"/>
</template>
遗留的问题
上面的方案,没办法解决动态渲染不同文档的问题。
如果要解决点击按钮以后,根据key渲染不同的文档,还需要额外做一些操作。
相关文章:
onlyoffice实现打开文档的功能
后端代码 import api from api import middlewareasync def doc_callback(request):data await api.req.get_json(request)print("callback ", data)# status 2 文档准备好被保存# status 6 文档编辑会话关闭return api.resp.success()app api.Api(routes[api.…...
基于 SpringBoot + Vue 的图书购物商城项目
本项目是一个基于 SpringBoot 和 Vue 的图书购物商城系统。系统主要实现了用户注册、登录,图书浏览、查询、加购,购物车管理,订单结算,会员折扣,下单,个人订单管理,书籍及分类管理,用…...
如何使用kimi智能助手:您的智能生活小助手
Kimi智能助手是一款功能强大的AI工具,旨在帮助用户提高工作效率和生活品质。下面小编将详细介绍如何使用Kimi智能助手,涵盖其主要功能以及一些实用技巧。 一、Kimi智能助手的主要功能 多语言对话能力:Kimi擅长中文和英文的对话,可…...
sql操作
1. 按条件将表A的数据更新到表B中: update B b set b.col1 (select col1 from A a where b. id a.code), b.col2 (select col2 from A a where b. id a.code), ………… 2. 将表A的全量数据插入到表B中 insert into B (col1, col2, col3, col4,……&am…...
开关电源调试记录-基于DK112(DK1203也一样)作为开关主控芯片的开关电源
调试了一款DK112(datasheet)开关电源控制芯片。 1、原理图如下: 2、测试波形 a.输出波形,图中标识“5V”的位置 b.芯片VCC引脚,图中标识“4”的位置 c.芯片FB引脚,图中标识“3”的位置 对于FB引脚&…...
【自然语言处理】GPT-5技术突破预测:引领自然语言处理革新的里程碑
摘要 随着科技的飞速发展,人工智能(AI)领域正迎来一场前所未有的革命。近日,OpenAI首席技术官米拉穆拉蒂在采访中透露,新一代大语言模型GPT-5将在一年半后发布,这一消息无疑在科技界掀起了巨大的波澜。GPT-…...
qt基本窗口类(QWidget,QDialog,QMainWindow)
1.三个基本窗口类 1.1QWidget 所有窗口的基类 可以内嵌到其他窗口的内部,无边框 也可以作为独立窗口显示,有边框 1.2QDialog 继承于QWidget 对话框窗口类 不可以内嵌到其他窗口 有模态和非模态两种显示方式 1.3QMainWind 继承于QWidget 主窗口类 不可以…...
最新收录历年地震数据,含时间、位置、类型、震级等信息
基本信息. 数据名称: 历年地震数据 数据格式: Shp 数据时间: 2023年 数据几何类型: 点 数据坐标系: WGS84坐标系 数据来源:网络公开数据 数据字段: 序号字段名称字段说明1dzlx地震类型2zj震级3zysd震源深度(米)4jtwz…...
C++ 串口读写
这段代码演示了如何使用 Windows API 中的串口通信功能进行简单的数据发送和接收。它使用了串口的基本操作和设置,并通过 sendSizeCategory 函数实现了一个简单的串口通信示例,发送一个十六进制数据,并读取串口返回的数据。 _CRT_SECURE_NO_WARNINGS:这是针对使用 strcpy …...
WebRTC系列实战-自定义RTP中的extension
文章目录 1. 新增extensionsId;1.1 新增自定义extension1.2 准备添加到sdp相关操作1.3 对header长度返回的修改:2. 自定义extesion的写入及注册到extensionMap中2.1 添加到RTPheader中2.2. 大小限制2.3. 是否注册限制2.4. 自定义extension注册需要修改的位置3.接收端解析及注…...
std::function和std::bind函数
std::function和std::bind是C11引入的功能强大的库组件,用于处理函数对象和函数调用的高级操作。它们极大地增强了C处理回调、函数指针和函数对象的能力。 std::function std::function是一个通用的、多态的函数封装器,可以容纳任何可调用的目标——包…...
补码的理解,想明白了觉得还挺有趣的
原因: 之前会一直好奇补码为什么是这么设计的,刚刚发呆的时候突然就明白了。 设计目的: 要理解,补码的设计初衷是为了计算机的计算问题。计算机的加法计算是非常简单的,但是对于减法,因为要借位…...
FuTalk设计周刊-Vol.027
🔥🔥交互体验 创意运营🔥🔥 1、「AIGC实战」城市消费券项目经验 随着AI图像生成技术的高速发展,以Midjourney、Stable diffusion为例的AI工具引起了大家广泛的研究和应用浪潮,也印证了早期流传在AIGC圈的…...
抖音外卖服务商有哪些,盘点这几家正规服务商!
当前,抖音外卖的关注度不断上涨,抖音外卖服务商也逐渐成为了众多创业者心中的理想创业赛道。在此背景下,抖音外卖服务商的入局途径多次引发创业者热议,以抖音外卖服务商有哪些公司为代表的相关话题更是长期位居创业者问题榜单的前…...
sh脚本模块笔记
sh脚本模块笔记 1. 如果不存在,则创建指定目录2. 检测python启动指令 记录一些sh脚本中用到过的模块 1. 如果不存在,则创建指定目录 这个脚本首先会检查指定的目录是否存在,如果存在则会打印错误消息并退出,否则会创建该目录&am…...
关于服务器的一些知识
1. 云服务器 和 轻量应用服务器 腾讯云中的"云服务器"(Cloud Virtual Machine, CVM)和"轻量应用服务器"(Lite Cloud Server)都是提供云端计算资源的服务,但它们在定位、特性和使用场景上存在一些差…...
力扣-和为K的子数组
题目-和为 K 的子数组 解法1:两层for循环 public class T560 {public static int subarraySum(int[] nums, int k) {int res 0;for (int i 0; i < nums.length; i) {int tempSum 0;for (int j i; j < nums.length; j) {tempSum nums[j];if (tempSum k)…...
写一个坏越个人天地(五)
昨天整了半天天气api还是有点小问题。一天50次真的不够我test的。一气之下还是全删了改用高德api。把接口写在了后端,这样我启动界面后就可以直接通过接口在后端嘎嘎处理逻辑了。再整理返回就好了 不过高德api好像获取地址的概率好低,于是我还是整了个获…...
步步精科技诚邀您参加2024慕尼黑上海电子展
尊敬的客户: 我们诚挚地邀请您参加即将于2024年7月8日至7月10日在上海新国际博览中心举办的2024慕尼黑上海电子展(electronica China)。此次展会汇聚了国内外优秀企业,展示从元器件到系统集成方案的完整产品链,为各行…...
Spring Boot中如何配置和使用多数据源
Spring Boot中如何配置和使用多数据源 大家好,我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编,也是冬天不穿秋裤,天冷也要风度的程序猿!今天,我们将深入探讨如何在Spring Boot应用中配置和使用多数据…...
vue3 【提效】全局布局 vite-plugin-vue-layouts 实用教程
一个常见的需求是,同模块的若干页面需要使用同一种布局,比如俱乐部相关的页面的顶部需要展示俱乐部的名称,其他页面顶部需要展示网站名称。 通常实现的方法是,将俱乐部的名称和网站名称定义成公共组件,在每个页面都书…...
前端性能优化-实测
PageSpeed Insights 性能测试 今天测试网站性能的时候发现一个问题,一个h2标签内容为什么会占据这么长的渲染时间,甚至有阶段测到占据了7000多毫秒,使用了很多方法都不能解决,包括了修改标签,样式大小等,当…...
【Linux】初识操作系统
一、冯•诺依曼体系结构 在学习操作系统之前,我们先来认识一下冯•诺依曼体系结构,我们常见的计算机,如笔记本。我们不常见的计算机,如服务器,大部分都遵守冯诺依曼体系。 截至目前,我们所认识的计算机&am…...
等保2.0中,如何确保云服务提供商的数据主权合规?
等保2.0中云服务提供商的数据主权合规措施 等保2.0(网络安全等级保护2.0)是中国的网络安全标准,旨在确保云服务提供商的数据主权合规。以下是一些关键措施和要求: 数据地理位置要求:云服务提供商必须保证所有基础设施位…...
【AI大模型】Transformers大模型库(十四):Datasets Viewer
目录 一、引言 二、Datasets Viewer数据查看器 2.1 概述 2.2 示例 三、总结 一、引言 这里的Transformers指的是huggingface开发的大模型库,为huggingface上数以万计的预训练大模型提供预测、训练等服务。 🤗 Transformers 提供了数以千计的预训练…...
一个例子理解傅里叶变换的计算过程
假设我们有一个简单的信号,由两个不同频率的正弦波组成,我们希望通过傅里叶变换来分析其频谱。 示例信号 假设我们有一个信号 : 这个信号由两个频率成分组成:一个50 Hz的正弦波和一个120 Hz的正弦波,后者的振幅是前者…...
2-2到2-4
计算出所有人的平均年龄: val lines sc.textFile("/root/data/scala/people/page.txt") val count lines.count() val total lines.map(line > line.split(" ")(1)).map(t>t.trim.toInt).collect().reduce((a,b)>ab) val avgAge …...
Vatee万腾平台:一站式智慧服务,让生活更美好
在数字化浪潮席卷全球的今天,我们生活的方方面面都在经历着前所未有的变革。Vatee万腾平台凭借其一站式智慧服务,正成为推动这场变革的重要力量,让我们的生活变得更加美好。 Vatee万腾平台,作为一家专注于提供智慧服务的领军企业&…...
如何选择一个好的汽车油封制造商?
汽车的每一个零部件都至关重要,其中,油封的作用更是不可忽视。它们确保了液体和气体在汽车内部的正确流动,防止了泄漏。因此,选择一个可靠的汽车油封制造商就显得尤为重要。那么,我们应该如何做出明智的选择呢? 首先…...
构建高效的电商返利系统:架构设计与实现
构建高效的电商返利系统:架构设计与实现 大家好,我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编,也是冬天不穿秋裤,天冷也要风度的程序猿! 电商返利系统作为连接消费者和商家的桥梁,能够…...
如何使用 Python 交互式解释器?
1. 什么是Python交互式解释器? Python交互式解释器是一种REPL(Read-Eval-Print Loop)环境。它会读取用户输入的代码,执行代码,并输出结果,随后等待下一个用户输入。这种交互方式使得Python非常适合快速原型…...
C++日期类的完整实现,以及this指针的const修饰等的介绍
文章目录 前言一、日期类的实现二、this指针的const修饰总结 前言 C日期类的完整实现,以及this指针的const修饰等的介绍 一、日期类的实现 // Date.h #pragma once#include <iostream> using namespace std;#include <assert.h>class Date {// 友元函…...
缓冲区溢出
本文作者:杉木涂鸦智能安全实验室 前置知识点 栈 栈(Stack)是计算机中的一种数据结构,用于存储临时数据。它的特点是后入先出(LIFO),只能在栈顶添加或删除数据。在程序中,栈被用于…...
step7:“模拟量界面”逻辑
文章目录 文章介绍效果图AnalogPage.qml结构图调用 SerialPortHandler.sendData(message); serialporthandler.cpp 文章介绍 之前的6步实现了案例MF的界面设计和串口界面的逻辑设计,本文将实现模拟量界面的逻辑设计 新增功能: 1)弹出提示框 …...
Arduino - 继电器
Arduino - 继电器 In a previous tutorial, we have learned how to turn on/off an LED. In this tutorial, we are going to learn how to turn on/off some kind of devices that use the high voltage power supply(such as a light bulb, fan, electromagnetic lock, lin…...
状态压缩DP——AcWing 327. 玉米田
状态压缩DP 定义 状态压缩 DP 是一种通过二进制压缩状态的动态规划算法。它通过使用位运算来加速状态的转移和计算,从而提高算法的效率。 注意事项 数据范围:状态压缩 DP 通常适用于数据范围较小的问题,因为它需要使用二进制来表示状态&a…...
kafka(二)安装部署(2)windows
目录 一、前提 1、jdk 2、Zookeeper 2.1、解压 2.2、创建data文件夹 2.3、配置文件 2.4、添加环境变量 2.5、启动zk:zkServer 2.6、客户端 3、Scala 3.1、下载安装 3.2、配置环境变量 3.3、验证是否安装成功 二、kafka下载安装 1、下载 2、安装 2.1…...
aliplayer Server returned 403 Forbidden (access denied)
最近在接入阿里云播放器的sdk,项目的播放地址是m3u8的,h265的url 输入播放源以后播放报错,提示403,拒绝访问,起初以为是crt路径问题和key的问题,然后检查了以后没问题,后来又看了一下是不是白名单的问题,但是项目资源没通过阿里云平台存储 AVPUrlSource *source [[AVPUrlSou…...
单例模式(下)
文章目录 文章介绍步骤安排及单例讲解step1:注册单例类型(main.cpp)step2:定义类和私有构造函数(keyboardinputmanager.h)step3:(keyboardinputmanager.cpp)step4:在qml中…...
合约期VS优惠期,搞明白他们的区别才能避免很多坑!
在购买流量卡时,相信大家也都发现了,市面上的不少套餐都是有合约期和优惠期的,尤其是联通和移动,那么,什么是合约期?什么又是优惠期呢? 其实,目前很多在网上办理的大流量卡都是有…...
函数式反应式编程(FRP)在Scala中的实践与探索
函数式反应式编程(Functional Reactive Programming,简称FRP)是一种编程范式,它结合了函数式编程(Functional Programming,FP)的声明式特性和反应式编程(Reactive Programming&#…...
NGINX配置web文件服务
一、需求描述 系统需要提供文件(pdf、图片)等上传后支持预览功能。 二、实现方式 2.1 文件权限配置 chmod arwx -R public/chmod 是更改文件权限的命令。-R 是递归选项,表示更改目录及其所有子目录和文件的权限。arwx 是权限设置…...
deepspeed docker集群实现多机多卡训练----问题记录及解决方案资源汇总
. Docker中实现Deepspeed多机多卡训练 【掘金-雨田君的记事本】docker容器中deepspeed多机多卡集群分布式训练大模型 . 问题记录及解决方案资源汇总 问题1:deepspeed socketStartConnect: Connect to 172.18.0.3<54379> failed : Software caused connectio…...
恢复 IntelliJ IDEA 中消失的菜单栏
要恢复 IntelliJ IDEA 中消失的菜单栏,可以按照以下简单步骤操作: 使用快捷键打开搜索:首先,双击 Shift 键打开全局搜索对话框。 搜索“Menu”:在搜索框中输入 menu,然后从搜索结果中选择与“Main Menu”相…...
漏洞利用开发基础学习记录
文章目录 简介Win32缓冲区溢出内容难点 SEH 溢出内容难点 Egg Hunters内容难点 Unicode 溢出内容难点 x86-64 缓冲区溢出内容难点 参考资料 简介 本文基于ERC.Xdbg漏洞分析文章进行初步归纳整理,主要有Win32 缓冲区溢出、SEH 溢出、Egg Hunters、Unicode 溢出、x86…...
云通SIPX,您的码号资源智能调度专家!
在数字化转型的浪潮中,号码资源作为企业与客户沟通的重要桥梁,其管理效率直接关系到企业运营的成败。随着运营商对号码资源管理的规范化和精细化,企业对高效、智能的号码资源管理需求日益增长,以实现对外呼叫的降本增效。 一、什么…...
04-Mysql 索引,事务
MySQL 索引介绍 索引是一个排序的列表,在这个列表中存储着索引的值和包含这个值的数据所在行的物理地址。在数据十分庞大的时候,索引可以大大加快查询的速度。这是因为使用索引后可以不用扫描全表来定位某行的数据,而是先通过索引表找到该行…...
U盘提示格式化怎么搞定?本文有5种方法(内含教程)
U盘提示格式化是一种常见故障,即:当U盘插入电脑后,电脑上弹出对话框,提示该U盘需要格式化才能使用。 接触不良、文件系统损坏、热插拔、感染病毒、芯片损坏等原因都可能导致U盘出现此故障。这时点击“格式化”,大概率会…...
day02-登录模块-主页鉴权
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 1.分析登录流程1.1传统思路是登录校验通过之后,直接调用接口,获取token之后,跳转到主页1.2vue-element-admin模板的登录思路&…...
git rebase的使用
没有排版,但是干货 因为项目要求,所以使用rebase指令 我使用的是rebase 的分支变基的功能 情景描述: 一共有两个分支:master owner 我在owner分枝上开发,有好多次commit master上也有同事在正常commit, …...