ONLYOFFICE集成(Vue3+Nest)

embedded/2024/12/25 14:48:00/
ONLYOFFICE

ONLYOFFICE 文档是一个开源办公套件,包括文本文档、电子表格、演示文稿和可填写表单的编辑器。 它提供以下功能:创建、编辑和查看文本文档、电子表格、演示文稿和可填写表单。

拉取onlyoffice的docker镜像

这里使用onlyoffice7.1.1版本(7.2版本默认开启jwt验证)

compose.yaml

代码解读

复制代码

services: onlyoffice: image: onlyoffice/documentserver:7.1.1 container_name: onlyoffice7.1.1 ports: - 8011:443 - 8012:80 volumes: - ./onlyoffice/logs:/var/log/onlyoffice - ./onlyoffice/data:/var/www/onlyoffice/Data - ./onlyoffice/lib:/var/lib/onlyoffice - ./onlyoffice/db:/var/lib/postgresql restart: always environment: - JWT_ENABLED=false

  • - ./onlyoffice/logs:/var/log/onlyoffice: 将主机上./onlyoffice/logs目录挂载到容器内的/var/log/onlyoffice,用于存储日志文件。
  • - ./onlyoffice/data:/var/www/onlyoffice/Data: 将主机上./onlyoffice/data目录挂载到容器内的/var/www/onlyoffice/Data,用于存储 OnlyOffice 数据文件。
  • - ./onlyoffice/lib:/var/lib/onlyoffice: 将主机上./onlyoffice/lib目录挂载到容器内的/var/lib/onlyoffice,用于存储 OnlyOffice 应用程序文件。
  • - ./onlyoffice/db:/var/lib/postgresql: 将主机上./onlyoffice/db目录挂载到容器内的/var/lib/postgresql,用于存储 PostgreSQL 数据库文件(OnlyOffice 可能使用 PostgreSQL 进行数据存储)。
  • JWT_ENABLED=false 关闭jwt验证
Vue3

ONLYOFFICE Docs Vue.js组件集成 ONLYOFFICE Docs 到Vue.js项目

  1. npm install --save @onlyoffice/document-editor-vue安装 ONLYOFFICE Docs Vue.js 组件
  2. documentServerUrl地址为onlyoffice docker镜像地址
  3. config的document中url为文档地址可以选为文件服务器地址,fileType为文件类型,key可以作为文档唯一标识

xml

代码解读

复制代码

<template> <DocumentEditor ref="docEditor" documentServerUrl="xxxx" :config="config" /> </template> <script lang="ts" setup> import { DocumentEditor } from "@onlyoffice/document-editor-vue"; const docEditor = ref<HTMLElement | null>(null) const config = ref({ document: { fileType: "", title: "", key: "", url: "" }, documentType: "",// 文档类型 editorConfig: { callbackUrl: "",// 回调地址 lang: "zh-CN",// 中文设置 customization: { forcesave: true,// 强保存 autosave:false// 自动保存 }, }, }) onBeforeUnmount(()=>{ window.DocEditor.instances['docEditor'].destroyEditor() })

Nest
  1. Nest主要服务为回调处理程序官方文档

callback.controller…

代码解读

复制代码

import { Controller, Post, Req, Res, Body } from '@nestjs/common'; import { TrackService } from './track.service'; @Controller('callback') export class TrackController { constructor(private readonly trackService: TrackService) {} @Post() async track(@Req() req, @Res() res, @Body() body: any) { try { await this.callbackService.updateFile(res, body, pathForSave); } catch (error) { res.status(500).json({ error: 'Internal Server Error' }); } } }

根据不同的状态执行不同的回调操作,文档存储服务必须返回以下响应,否则文档编辑器将显示错误消息

callback.service.ts

代码解读

复制代码

import { Injectable } from '@nestjs/common'; import * as fs from 'fs'; import axios from 'axios'; import { join } from 'path'; import { bodyDto } from 'xx @Injectable() export class TrackService { async updateFile(response: any, body: any, path: string) { try { if (body.status == 1) { response.write('{"error":0}'); response.end(); } else if (body.status == 6) { const file = await axios.get(data.url, { responseType: 'arraybuffer', }); const savePath = join('文件储存地址'); fs.writeFileSync(savePath, file.data); response.write('{"error":0}'); response.end(); } else { response.write('{"error":0}'); response.end(); } } catch (error) { response.status(500).json(); } }

bodyDto.ts

代码解读

复制代码

export class bodyDto { readonly changesurl?: string; readonly forcesavetype?: number; readonly history?: history; readonly filetype?: string; readonly key?: string; readonly status?: number; readonly url?: string; readonly users?: Array<string>; readonly userdata?: string; readonly actions?: Array<actions>; readonly lastsave?: string; } class actions { readonly type: number; readonly userid: string; } class history { readonly changes?: string; readonly serverVersion?: string; }

主体流程

大致简化流程如下


http://www.ppmy.cn/embedded/148648.html

相关文章

vue下拉加载页面切换回到当前滚动位置

当项目是下拉分页加载数据时&#xff0c;当离开页面再次回到当前页面时&#xff0c;数据会从第一页重新加载&#xff0c;这就会造成不好的体验。所以解决办法就是在离开当前页面时记录当前滚动的位置&#xff0c;然后再下次回到当前页面时&#xff0c;跳转到当前记录的位置。触…

git分支强推 push

1.单分支强推 git push origin 分支名 --force 2.多分支强制提交&#xff08;谨慎操作&#xff0c;会影响其他分支&#xff09; git push --force --tags origin refs/heads/* 这个命令的含义是强制推送所有本地分支到远程仓库&#xff0c;并且同时推送所有标签…

WEB 漏洞 - 文件包含漏洞深度解析

目录 WEB 漏洞 - 文件包含漏洞深度解析 一、引言 二、什么是文件包含漏洞 三、文件包含漏洞原理 四、文件包含漏洞检测步骤及方法 五、文件包含漏洞类型 六、文件包含漏洞利用方式及示例 七、漏洞防御方案及代码示例 一、引言 在 Web 安全领域&#xff0c;文件包含漏洞…

UDP网络编程套接

目录 本文核心 预备知识 1.端口号 认识TCP协议 认识UDP协议 网络字节序 socket编程接口 sockaddr结构 UDP套接字编程 服务端 客户端 TCP与UDP传输的区别 可靠性&#xff1a; 传输方式&#xff1a; 用途&#xff1a; 头部开销&#xff1a; 速度&#xff1a; li…

大数据-255 离线数仓 - Atlas 数据仓库元数据管理 数据血缘关系 元数据

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; Java篇开始了&#xff01; 目前开始更新 MyBatis&#xff0c;一起深入浅出&#xff01; 目前已经更新到了&#xff1a; Hadoop&#xff0…

数字逻辑(五)——用二进制来表示音频和视频

目录 1. 用二级制来表示音频 1.1 采样 1.2 量化 1.3 编码 2. 用二进制来表示视频 2.1 使用二进制来存储文件 2.2 使用二进制来采集视频 2.3 计算机如何播放视频 1. 用二级制来表示音频 声音是由物体的振动来表示的&#xff0c;振动是一种连续的波形&#xff0c;因此…

[计算机图形学] 【Unity Shader】【图形渲染】Shader数学基础6-逆矩阵与正交矩阵

在计算机图形学与Shader编程中,矩阵广泛应用于各种变换操作,如旋转、缩放、平移等。理解矩阵的基本性质,尤其是逆矩阵和正交矩阵,对于有效地实现图形变换至关重要。本文将介绍逆矩阵和正交矩阵的数学基础,帮助你更好地理解这些概念及其在图形学中的应用。 逆矩阵的基本概…

android studio更改应用图片,和应用名字。

更改应用图标&#xff0c;和名字 先打开AndroidManifest.xml文件。 更改图片文件名字&#xff08; 右键-->构建-->重命名&#xff08;R&#xff09;&#xff09;