当前位置: 首页 > news >正文

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 的图书购物商城系统。系统主要实现了用户注册、登录&#xff0c;图书浏览、查询、加购&#xff0c;购物车管理&#xff0c;订单结算&#xff0c;会员折扣&#xff0c;下单&#xff0c;个人订单管理&#xff0c;书籍及分类管理&#xff0c;用…...

如何使用kimi智能助手:您的智能生活小助手

Kimi智能助手是一款功能强大的AI工具&#xff0c;旨在帮助用户提高工作效率和生活品质。下面小编将详细介绍如何使用Kimi智能助手&#xff0c;涵盖其主要功能以及一些实用技巧。 一、Kimi智能助手的主要功能 多语言对话能力&#xff1a;Kimi擅长中文和英文的对话&#xff0c;可…...

sql操作

1. 按条件将表A的数据更新到表B中&#xff1a; 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&#xff08;datasheet&#xff09;开关电源控制芯片。 1、原理图如下&#xff1a; 2、测试波形 a.输出波形&#xff0c;图中标识“5V”的位置 b.芯片VCC引脚&#xff0c;图中标识“4”的位置 c.芯片FB引脚&#xff0c;图中标识“3”的位置 对于FB引脚&…...

【自然语言处理】GPT-5技术突破预测:引领自然语言处理革新的里程碑

摘要 随着科技的飞速发展&#xff0c;人工智能&#xff08;AI&#xff09;领域正迎来一场前所未有的革命。近日&#xff0c;OpenAI首席技术官米拉穆拉蒂在采访中透露&#xff0c;新一代大语言模型GPT-5将在一年半后发布&#xff0c;这一消息无疑在科技界掀起了巨大的波澜。GPT-…...

qt基本窗口类(QWidget,QDialog,QMainWindow)

1.三个基本窗口类 1.1QWidget 所有窗口的基类 可以内嵌到其他窗口的内部&#xff0c;无边框 也可以作为独立窗口显示&#xff0c;有边框 1.2QDialog 继承于QWidget 对话框窗口类 不可以内嵌到其他窗口 有模态和非模态两种显示方式 1.3QMainWind 继承于QWidget 主窗口类 不可以…...

最新收录历年地震数据,含时间、位置、类型、震级等信息

基本信息. 数据名称: 历年地震数据 数据格式: Shp 数据时间: 2023年 数据几何类型: 点 数据坐标系: WGS84坐标系 数据来源&#xff1a;网络公开数据 数据字段&#xff1a; 序号字段名称字段说明1dzlx地震类型2zj震级3zysd震源深度&#xff08;米&#xff09;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引入的功能强大的库组件&#xff0c;用于处理函数对象和函数调用的高级操作。它们极大地增强了C处理回调、函数指针和函数对象的能力。 std::function std::function是一个通用的、多态的函数封装器&#xff0c;可以容纳任何可调用的目标——包…...

补码的理解,想明白了觉得还挺有趣的

原因&#xff1a; 之前会一直好奇补码为什么是这么设计的&#xff0c;刚刚发呆的时候突然就明白了。 设计目的&#xff1a; 要理解&#xff0c;补码的设计初衷是为了计算机的计算问题。计算机的加法计算是非常简单的&#xff0c;但是对于减法&#xff0c;因为要借位&#xf…...

FuTalk设计周刊-Vol.027

&#x1f525;&#x1f525;交互体验 创意运营&#x1f525;&#x1f525; 1、「AIGC实战」城市消费券项目经验 随着AI图像生成技术的高速发展&#xff0c;以Midjourney、Stable diffusion为例的AI工具引起了大家广泛的研究和应用浪潮&#xff0c;也印证了早期流传在AIGC圈的…...

抖音外卖服务商有哪些,盘点这几家正规服务商!

当前&#xff0c;抖音外卖的关注度不断上涨&#xff0c;抖音外卖服务商也逐渐成为了众多创业者心中的理想创业赛道。在此背景下&#xff0c;抖音外卖服务商的入局途径多次引发创业者热议&#xff0c;以抖音外卖服务商有哪些公司为代表的相关话题更是长期位居创业者问题榜单的前…...

sh脚本模块笔记

sh脚本模块笔记 1. 如果不存在&#xff0c;则创建指定目录2. 检测python启动指令 记录一些sh脚本中用到过的模块 1. 如果不存在&#xff0c;则创建指定目录 这个脚本首先会检查指定的目录是否存在&#xff0c;如果存在则会打印错误消息并退出&#xff0c;否则会创建该目录&am…...

关于服务器的一些知识

1. 云服务器 和 轻量应用服务器 腾讯云中的"云服务器"&#xff08;Cloud Virtual Machine, CVM&#xff09;和"轻量应用服务器"&#xff08;Lite Cloud Server&#xff09;都是提供云端计算资源的服务&#xff0c;但它们在定位、特性和使用场景上存在一些差…...

力扣-和为K的子数组

题目-和为 K 的子数组 解法1&#xff1a;两层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。把接口写在了后端&#xff0c;这样我启动界面后就可以直接通过接口在后端嘎嘎处理逻辑了。再整理返回就好了 不过高德api好像获取地址的概率好低&#xff0c;于是我还是整了个获…...

步步精科技诚邀您参加2024慕尼黑上海电子展

尊敬的客户&#xff1a; 我们诚挚地邀请您参加即将于2024年7月8日至7月10日在上海新国际博览中心举办的2024慕尼黑上海电子展&#xff08;electronica China&#xff09;。此次展会汇聚了国内外优秀企业&#xff0c;展示从元器件到系统集成方案的完整产品链&#xff0c;为各行…...

Spring Boot中如何配置和使用多数据源

Spring Boot中如何配置和使用多数据源 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01;今天&#xff0c;我们将深入探讨如何在Spring Boot应用中配置和使用多数据…...

VB.net复制Ntag213卡写入UID

本示例使用的发卡器&#xff1a;https://item.taobao.com/item.htm?ftt&id615391857885 一、读取旧Ntag卡的UID和数据 Private Sub Button15_Click(sender As Object, e As EventArgs) Handles Button15.Click轻松读卡技术支持:网站:Dim i, j As IntegerDim cardidhex, …...

图表类系列各种样式PPT模版分享

图标图表系列PPT模版&#xff0c;柱状图PPT模版&#xff0c;线状图PPT模版&#xff0c;折线图PPT模版&#xff0c;饼状图PPT模版&#xff0c;雷达图PPT模版&#xff0c;树状图PPT模版 图表类系列各种样式PPT模版分享&#xff1a;图表系列PPT模板https://pan.quark.cn/s/20d40aa…...

招商蛇口 | 执笔CID,启幕低密生活新境

作为中国城市生长的力量&#xff0c;招商蛇口以“美好生活承载者”为使命&#xff0c;深耕全球111座城市&#xff0c;以央企担当匠造时代理想人居。从深圳湾的开拓基因到西安高新CID的战略落子&#xff0c;招商蛇口始终与城市发展同频共振&#xff0c;以建筑诠释对土地与生活的…...

Caliper 配置文件解析:fisco-bcos.json

config.yaml 文件 config.yaml 是 Caliper 的主配置文件,通常包含以下内容: test:name: fisco-bcos-test # 测试名称description: Performance test of FISCO-BCOS # 测试描述workers:type: local # 工作进程类型number: 5 # 工作进程数量monitor:type: - docker- pro…...

人工智能 - 在Dify、Coze、n8n、FastGPT和RAGFlow之间做出技术选型

在Dify、Coze、n8n、FastGPT和RAGFlow之间做出技术选型。这些平台各有侧重&#xff0c;适用场景差异显著。下面我将从核心功能定位、典型应用场景、真实体验痛点、选型决策关键点进行拆解&#xff0c;并提供具体场景下的推荐方案。 一、核心功能定位速览 平台核心定位技术栈亮…...

快速排序算法改进:随机快排-荷兰国旗划分详解

随机快速排序-荷兰国旗划分算法详解 一、基础知识回顾1.1 快速排序简介1.2 荷兰国旗问题 二、随机快排 - 荷兰国旗划分原理2.1 随机化枢轴选择2.2 荷兰国旗划分过程2.3 结合随机快排与荷兰国旗划分 三、代码实现3.1 Python实现3.2 Java实现3.3 C实现 四、性能分析4.1 时间复杂度…...

CSS3相关知识点

CSS3相关知识点 CSS3私有前缀私有前缀私有前缀存在的意义常见浏览器的私有前缀 CSS3基本语法CSS3 新增长度单位CSS3 新增颜色设置方式CSS3 新增选择器CSS3 新增盒模型相关属性box-sizing 怪异盒模型resize调整盒子大小box-shadow 盒子阴影opacity 不透明度 CSS3 新增背景属性ba…...

何谓AI编程【02】AI编程官网以优雅草星云智控为例建设实践-完善顶部-建立各项子页-调整排版-优雅草卓伊凡

何谓AI编程【02】AI编程官网以优雅草星云智控为例建设实践-完善顶部-建立各项子页-调整排版-优雅草卓伊凡 背景 我们以建设星云智控官网来做AI编程实践&#xff0c;很多人以为AI已经强大到不需要程序员了&#xff0c;其实不是&#xff0c;AI更加需要程序员&#xff0c;普通人…...

Android Framework预装traceroute执行文件到system/bin下

文章目录 Android SDK中寻找traceroute代码内置traceroute到SDK中traceroute参数说明-I 参数&#xff08;使用 ICMP Echo 请求&#xff09;-T 参数&#xff08;使用 TCP SYN 包&#xff09; 相关文章 Android SDK中寻找traceroute代码 设备使用的是Android 11&#xff0c;在/s…...

智能体革命:企业如何构建自主决策的AI代理?

OpenAI智能代理构建实用指南详解 随着大型语言模型&#xff08;LLM&#xff09;在推理、多模态理解和工具调用能力上的进步&#xff0c;智能代理&#xff08;Agents&#xff09;成为自动化领域的新突破。与传统软件仅帮助用户自动化流程不同&#xff0c;智能代理能够自主执行工…...