ONLYOFFICE集成（Vue3+Nest)

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; } 

主体流程

大致简化流程如下