ONLYOFFICE8.0部署集成(vue+java)并配置存储为minio

文章目录

  • 前言
  • 一、使用docker安装onlyoffice8安装
    • 使用DockerDesktop方式
    • 命令行方式
    • 使用 HTTPS 运行
    • 展示
  • 二、项目集成
    • 前端集成-vue3
    • html方式
    • 后端集成-java
  • 三、onlyoffice基础原理
  • 四、配置存储为minio
    • 1.onlyoffice配置文件挂载问题
    • 2.配置存储为minio
    • 3.验证切换minio存储是否生效
      • 1.测试方式一
      • 2.测试方式二

前言

之前也写过一个关于onlyoffice的文章，在上一篇中介绍了onlyoffice7.2版本的安装、简单的集成、和社区版、企业版、开发者版本的差异。
文章地址：https://blog.csdn.net/qq_43548590/article/details/129948103

本次则记录onlyoffice8.1.0基础环境搭建+Java+Vue3的集成使用

一、使用docker安装onlyoffice8安装

我这里使用的是443端口为演示，不想弄证书的可以映射80端口。如果是80端口则不要放置证书否则会出问题！

官网地址

使用DockerDesktop方式

1.首先我们拉取docker镜像
在这里插入图片描述

2.等着镜像拉取完成，我们来启动它，点击右边的启动按钮
宿主机的目录或文件挂载到 Docker
我这里的挂载地址为
/Users/mac/Desktop/tools/docker/onlyoffice/documentServer/xxxx这里根据自己的地址选择
在这里插入图片描述

命令行方式

docker run -i -t -d -p 10086:80 --name=test-onlyoffice-8.0  --restart=always  --privileged=true -v /Users/mac/Desktop/tools/docker/onlyoffice/documentServer/logs:/var/log/onlyoffice  -v /Users/mac/Desktop/tools/docker/onlyoffice/documentServer/data:/var/www/onlyoffice/Data -v /Users/mac/Desktop/tools/docker/onlyoffice/documentServer/postgresql:/var/lib/postgresql -v /Users/mac/Desktop/tools/docker/onlyoffice/documentServer/lib:/var/lib/onlyoffice   -e JWT_ENABLED=false  onlyoffice/documentserver:8.0

10086端口是访问端口，10087端口是info端口，查看方式为http协议（http://ip:10087/info）
关于镜像的相关信息自行查看

使用 HTTPS 运行

可以使用 SSL 保护对 onlyoffice 应用程序的访问，以防止未经授权的访问。虽然 CA 认证的 SSL 证书允许通过 CA 验证信任，但自签名证书也可以提供同等级别的信任验证，只要每个客户端采取一些额外步骤来验证您网站的身份。

sudo docker run -i -t -d -p 443:443 --restart=always \
-v /app/onlyoffice/DocumentServer/data:/var/www/onlyoffice/Data -e JWT_ENABLED=false onlyoffice/documentserver

要通过 SSL 保护应用程序的安全，基本上需要做两件事：

  • 私钥 (.key)
  • SSL 证书 (.crt)

我这里使用的是自建证书，不会的参考openssl自建证书

上传证书到刚才挂载的地址data下
地址为：/Users/mac/Desktop/tools/docker/onlyoffice/documentServer/data/certs

上传证书至certs目录，命名为onlyoffice.crt、onlyoffice.key

网页打开证书不信任问题
1.自建证书需要浏览器获取信任，方式自行百度
2.内网环境可以使用nginx部署项目然后添加证书

展示

到这里onlyoffice服务就搭建完成了

访问：https://ip地址:10086即可
在这里插入图片描述

二、项目集成

前端集成-vue3

这里使用的是vue3为示例代码

官方示例：https://api.onlyoffice.com/editors/vue
官方配置文档：https://api.onlyoffice.com/editors/config/document
中文文档地址：https://api.onlyoffice.com/zh/editors/basic

下载包

npm install --save @onlyoffice/document-editor-vue

页面代码

<template><DocumentEditorid="docEditor"documentServerUrl="https://ip:10086/":config="config"/>
</template>
<script setup>
import { DocumentEditor } from "@onlyoffice/document-editor-vue";
import {reactive} from "vue";const config = reactive({"documentType": "word","document": {"title": "【经营】通用合同模板.docx","url": "https://你的文件地址/demo.docx",// 当前用户对于当前文档的操作权限"permissions": {"print": false,"download": true //用户是否可以下载},"fileType": "docx",//文件类型//onlyoffice用key做文件缓存索引，推荐每次都随机生成一下，不然总是读取缓存"key": "e932e7bb1e4d44xxxxxx1xx8sxx18"},"editorConfig": {// 编辑器常规配置"customization": {// 自动保存可以关闭，常规ctrl+s更好用"autosave": true,"compactToolbar": true,"forcesave": true,"toolbarNoTabs": true,"help": false,"compactHeader": true,"hideRightMenu": true,"logo": {//自定义logo配置"image": "xxxx","imageDark": "xxx","url": "xxx","visible": false},},"mode": "edit",//view为只能浏览  edit为编辑//这个回调及其的重要"callbackUrl": "http://192.168.1.94:8080/onlyoffice/callback",// 菜单显示语言"lang": "zh-CN",// 当前操作用户信息"user": {"name": "superlu","id": "103"},}
})
</script>
<style>
html,body,#app{height: 100%;width:100%;margin: 0px}
</style>

html方式

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script type="text/javascript" src="http://IP:10086/web-apps/apps/api/documents/api.js"></script><style>body {width: 100%;height: 90vh;display: flex;flex-direction: column;}#placeholder {width: 100%;height: 100vh;}</style>
</head><body><div id="placeholder" class="nav" style="width: 100%; height: 100vh;"></div></body>
<script>var onDocumentReady = function () {console.log("文档准备好了");};var config = {"documentType": "word","historyList": {"history": [],"currentVersion": "1"},"document": {"title": "【经营】通用合同模板.docx","url": "https://文件地址/demo.docx","permissions": {"print": false,"download": true},"attachId": "e932e7bb1e4d449aa9a7d8b403b4b517","fileType": "docx","key": "e932e7bb1e4d449aa9a7d8ss517"},"editorConfig": {"customization": {"autosave": false,"compactToolbar": true,"forcesave": true,"toolbarNoTabs": true,"help": false,"compactHeader": true,"hideRightMenu": true,},"mode": "edit","callbackUrl": "https://回调地址","lang": "zh-CN","user": {"name": "superlu","id": "103"}}};var docEditor;initDocEditor();/*** 初始化编辑器*/function initDocEditor() {// 初始化配置config['events'] = {onDocumentReady: onDocumentReady};docEditor = new DocsAPI.DocEditor("placeholder", config);}</script></html>

后端集成-java

官方也有Spring版本的示例：https://github.com/ONLYOFFICE/document-server-integration/releases/latest/download/Java.Spring.Example.zip

package cn.superlu.onlyoffice.controller;import com.alibaba.fastjson.JSONObject;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import lombok.extern.slf4j.Slf4j;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.net.URL;
import java.util.Scanner;@RestController
@RequestMapping("/onlyoffice")
@Slf4j
public class OnlyOfficeController {/*** 回调*/@RequestMapping("/callback")public String callback(HttpServletRequest request, HttpServletResponse response) throws IOException {Scanner scanner = new Scanner(request.getInputStream()).useDelimiter("\\A");String body = scanner.hasNext() ? scanner.next() : "";JSONObject jsonObj = JSONObject.parseObject(body);System.out.println(jsonObj.get("status"));if((int) jsonObj.get("status") == 2){String downloadUri = (String) jsonObj.get("url");URL url = new URL(downloadUri);java.net.HttpURLConnection connection = (java.net.HttpURLConnection) url.openConnection();InputStream stream = connection.getInputStream();String fileName = cn.hutool.core.lang.UUID.randomUUID().toString().replace("-", "") + "_create." + jsonObj.get("filetype");String templatePath = getClass().getClassLoader().getResource("").getPath();templatePath += fileName;log.info("文件保存地址：" + templatePath);File tempFile = new File(templatePath);try (FileOutputStream out = new FileOutputStream(tempFile)) {int read;final byte[] bytes = new byte[1024];while ((read = stream.read(bytes)) != -1) {out.write(bytes, 0, read);}out.flush();}connection.disconnect();}return "{\"error\":0}";}
}

三、onlyoffice基础原理

onlyoffice有：

  • DOCUMENT SERVER（文档服务器）
  • DOCUMENT BUILDER（文档生成器）
  • Conversion API（转化API）

1、DOCUMENT SERVER（文档服务器）
用于web页面编辑office文件，也就是最最基础的功能。上面的实例就是DOCUMENT SERVER（文档服务器）
2、DOCUMENT BUILDER（文档生成器）
用于通过代码生成或者操作office文件，比如后端常用的：poi等框架，onlyoffice本身也提供了这个功能【进阶】
3、Conversion API（转化API）
部分公司业务上会需要对文件进行转化，onlyoffice也提供了这样的功能，比如word->html、word->pdf等等【进阶】

DOCUMENT SERVER（文档服务器）前后端如何进行交互
在这里插入图片描述
前端操作->onlyoffice->你的后端callback 如果你有做过微信之类的回调就会比较清晰，office服务器作为中介，用于处理前端与后端的连通。 除此之外，再无其他。

四、配置存储为minio

1.onlyoffice配置文件挂载问题

为了方便修改onlyoffice配置文件，想将配置也挂载出来，但是发现容器启动的时候/etc/onlyoffice/documentserver为空。所以自己想了个办法先启动一次容器。然后使用docker命令将/etc/onlyoffice/documentserver拷贝到宿主机然后删掉容器重新启动的时候挂载进去这样就可以了。

官方配置文件的描述：https://helpcenter.onlyoffice.com/installation/docs-developer-configuring.aspx

onlyoffice配置文件有如下这些：
在这里插入图片描述
请不要直接编辑default.json文件的内容。每次重新启动Docker容器或将ONLYOFFICE文档升级到新版本时，默认值都会恢复，并且所有更改都将丢失。

2.配置存储为minio

为什么onlyoffice可以存储到minio：onlyoffice本身就支持aws s3，而minio本身又兼容aws s3。所以才会使用minio来做文件存储，目前onlyoffice仅支持本地存储和aws s3存储。

不会搭建minio的可以看我的另外一篇博客：https://blog.csdn.net/qq_43548590/article/details/131889699

storage参数信息如下：

参数描述类型默认值
storage.name定义文档存储服务名称。字符串“storage-fs”
storage.fs定义 fileSystem 对象参数。对象
storage.fs.folderPath定义存储所有文件的文件夹的路径。App_Data字符串“”
storage.fs.urlExpires定义 fileSystem 对象的临时 URL 过期的时间（以秒为单位）。整数900
storage.fs.secretString定义用于对 URL 进行签名的密钥字符串。字符串“verysecretstring”
storage.region定义 Amazon 存储桶所在的 AWS 区域。字符串“”
storage.endpoint定义 S3 AWS 文档存储终端节点。字符串“http://localhost/s3”
storage.bucketName定义唯一的 S3 AWS 文档存储名称。字符串“cache”
storage.storageFolderName定义存储所有文件的 S3 AWS 文档存储文件夹名称。字符串“files”
storage.cacheFolderName定义在多租户模式下工作的缓存文件夹名称。字符串“data”
storage.urlExpires定义 S3 AWS 文档存储的 URL 过期的时间（以毫秒为单位）。整数604800
storage.accessKeyId定义用于访问 S3 AWS 文档存储的密钥 ID。字符串“AKID”
storage.secretAccessKey定义用于访问 S3 AWS 文档存储的私有密钥。字符串“SECRET”
storage.sslEnabled定义是否启用了 S3 AWS 文档存储的 SSL。布尔false
storage.s3ForcePathStyle定义对 S3 AWS 文档存储的请求是否始终使用路径样式寻址。布尔true
storage.externalHost定义一个外部主机，该主机将用于代替请求中指定的主机。字符串“”

将Amazon S3存储桶作为缓存连接到ONLYOFFICE文档
官方文档：https://helpcenter.onlyoffice.com/installation/docs-connect-amazon.aspx

在官方文档中写到：

如果您更改了文件中的参数，则在ONLYOFFICE文档更新或Docker容器重启后，所有更改都将丢失。为确保您的更改在更新后仍然存在，请编辑该文件/etc/onlyoffice/documentserver/local.json

但是我在local.json中配置了发现不起作用。我查阅了一下资料发现也有在development-linux.json中配置的我试了一下也不生效。最后配置在production-linux.json文件中才可以。注意这里根据自己的环境选择linux、mac、windows！

production-linux.json中配置如下信息

注意的是minio的端口
端口 9090 是 Web 控制台端口，
端口 9000 是 S3 API 端口。

  "storage": {"name": "storage-s3","region": "us-east-1","endpoint": "http://192.168.31.109:9000","bucketName": "onlyoffice","storageFolderName": "files","cacheFolderName": "data","urlExpires": 604800,"accessKeyId": "RNTriPvDjYYnkSfK44zQ","secretAccessKey": "oH9uQpoyGv4rhpxvZUVNbsKXa5PYi6f0egUboej1","useRequestToGetUrl": true,"useSignedUrl": true,"sslEnabled": true,"s3ForcePathStyle": true,"externalHost": ""}

在这里插入图片描述

3.验证切换minio存储是否生效

访问部署的onlyoffice服务，我这里地址为http://192.168.31.109:9999/

1.测试方式一

启用测试示例
在服务器中运行这两个命令
第一个命令为开启测试示例，第二个命令为添加到自启动
在这里插入图片描述

点击按钮来到测试示例页面进行测试

值得注意的是如果这里使用localhost或者127.0.0.1访问都会出现 ‘无法保存文档’或者‘下载文件错误’的提示

我这里是创建了一个word文档，然后保存请添加图片描述

2.测试方式二

采用上边写的vue+springboot代码来测试
请添加图片描述

为什么要配置存储为minio呢？
按照正常开发流程，用户保存文件后我们的后端接收到文件地址后需要在程序中拉取文件然后再存储到自己的指定位置（minio）。这样就很麻烦服务端拉取文件再转存需要耗费大量的性能和带宽。
onlyoffice文档转换完成后直接存到我们指定的minio中。但是storage属性是修改onlyoffice本地缓存为转变成对象存储。文件缓存默认存储为1天，超过一天后会自动清理。

我这里采用的方式是获取到了回调地址后后端直接操作minio将文件复制转存到我指定的文件夹下。这样就省去了拉取文件再次保存的步骤。

本文代码已经提交gitee https://gitee.com/luzhiyong_erfou/learning-notes/tree/master/onlyoffice

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

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

相关文章

生成式AI介绍

生成式AI介绍

生成式AI介绍 生成式AI&#xff08;Generative AI&#xff09;是人工智能领域的一种技术&#xff0c;能够通过学习现有数据来生成新的内容。不同于传统的人工智能模型只进行分类、回归等分析任务&#xff0c;生成式AI具备创作能力&#xff0c;能够生成文本、图像、音频甚至视频…
阅读更多...
基于spring拦截器实现博客项目的强制登录功能（四）

基于spring拦截器实现博客项目的强制登录功能（四）

6. 强制登录 当⽤⼾访问 博客列表和博客详情⻚ 时, 如果⽤⼾当前尚未登陆, 就⾃动跳转到登陆⻚⾯. 我们可以采⽤拦截器来完成, token通常由前端放在header中, 我们从header中获取token, 并校验 token是否合法 6.1 添加拦截器 package com.example.spring_blog_24_9_8.config;…
阅读更多...
性能测试-jmeter的控制器（十六）

性能测试-jmeter的控制器（十六）

一、if控制器 需求&#xff1a;使用“用户自定义变量”定义name变量&#xff0c;值可以是“baidu”或“itcast”,使用变量值&#xff0c;控制是否访问对应网站。 1、步骤&#xff1a; 在测试计划中添加用户定义的变量name,取值可为baidu或itcast添加两个http请求&#xff1a…
阅读更多...
misc音频隐写

misc音频隐写

一、MP3隐写 &#xff08;1&#xff09;题解&#xff1a;下载附件之后是一个mp3的音频文件&#xff1b;并且题目提示keysyclovergeek;所以直接使用MP3stego对音频文件进行解密&#xff1b;mp3stego工具是音频数据分析与隐写工具 &#xff08;2)mp3stego工具的使用&#xff1a;…
阅读更多...
CSS实现前端布局更巧妙的方案！在 flex 布局中通过使用 margin 实现水平垂直居中以及其他常见的前端布局

CSS实现前端布局更巧妙的方案！在 flex 布局中通过使用 margin 实现水平垂直居中以及其他常见的前端布局

在前端开发中&#xff0c;实现水平垂直居中一直是个热门话题。随着 CSS Flexbox 布局的普及&#xff0c;开发者们开始更多地使用 justify-content 和 align-items 这两个属性来解决这个问题。 然而&#xff0c;还有一种更加简洁、灵活的方式——使用 margin: auto; 来实现居中以…
阅读更多...
大数据之Flink（二）

大数据之Flink（二）

4、部署模式 flink部署模式&#xff1a; 会话模式&#xff08;Session Mode&#xff09;单作业模式&#xff08;Per-Job Mode&#xff09;应用模式&#xff08;Application Mode&#xff09; 区别在于集群的生命周期以及资源的分配方式&#xff1b;以及应用的main方法到底在…
阅读更多...
Vue3使用vue-qrcode-reader实现扫码绑定设备功能

Vue3使用vue-qrcode-reader实现扫码绑定设备功能

需求描述 移动端进入网站后&#xff0c;登录网站进入设备管理界面。点击添加设备&#xff0c;可以选择直接添加或者扫一扫。点击扫一扫进行扫描二维码获取设备序列号自动填充到添加设备界面的序列号输入框中。然后点击完成进行设备绑定。 安装vue-qrcode-reader 这里使用的版…
阅读更多...
2024.9.11 作业

2024.9.11 作业

绘制组件制作时钟 代码&#xff1a; /*******************************************/ 文件名&#xff1a;widget.h /*******************************************/ #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QPaintEvent> #include &l…
阅读更多...
MAX3483ESA+T具有±15kV ESD保护的+3.3V、低功耗收发器，适用于RS-485和RS-422通信

MAX3483ESA+T具有±15kV ESD保护的+3.3V、低功耗收发器，适用于RS-485和RS-422通信

MAX3483ESAT具有15kV ESD保护的3.3V、低功耗收发器&#xff0c;适用于RS-485和RS-422通信。每个器件包含一个驱动器和一个接收器。MAX3483ESAT具有限摆率驱动器&#xff0c;可充分降低EMI并减少因电缆端接不当引起的反射&#xff0c;从而实现数据速率高达250kbps的无误差数据传…
阅读更多...
【中间件】-容器编排平台Kubernetes简介

【中间件】-容器编排平台Kubernetes简介

目录 什么是K8s 为什么需要K8s 什么是容器(Contianer) K8s能做什么&#xff1f; K8s的架构原理 控制平面(Control plane) kube-apiserver etcd kube-scheduler kube-controller-manager cloud-controller-manager 小结 节点组件(Node) container runtime Pod kubelet ku…
阅读更多...
AnyChart 数据可视化框架

AnyChart 数据可视化框架

AnyChart 数据可视化框架 AnyChart 是一个灵活的 JavaScript&#xff08;HTML5、SVG、VML&#xff09;图表框架&#xff0c;适合任何需要数据可视化的解决方案。 目录 下载并安装开始插件将 AnyChart 与 TypeScript 结合使用将 AnyChart 与 ECMAScript 6 结合使用技术集成贡献…
阅读更多...
Anolis OS 7.9（龙蜥操作系统）上Oracle12C Release 2 （12.2）打补丁

Anolis OS 7.9（龙蜥操作系统）上Oracle12C Release 2 （12.2）打补丁

本文的oracle使用的是单实例环境 一、打补丁前环境准备 1、确保make, ar, ld,和 nm四个可执行命令在$PATH中 export PATH$PATH:/bin2、查看已装的Oracle的OPatch版本 #切换到oracle用户 su - oracle#进入到数据库的安装目录下的opatch目录 cd /ora01/app/oracle/product/12…
阅读更多...
JS_函数声明

JS_函数声明

JS中的方法,多称为函数,函数的声明语法和JAVA中有较大区别 函数说明 函数没有权限控制符不用声明函数的返回值类型,需要返回在函数体中直接return即可,也无需void关键字参数列表中,无需数据类型调用函数时,实参和形参的个数可以不一致声明函数时需要用function关键字函数没有…
阅读更多...
github actions CICD简单使用案例

github actions CICD简单使用案例

参考&#xff1a; https://developer.aliyun.com/article/1540773 https://github.com/ViggoZ/producthunt-daily-hot/blob/main/.github/workflows/generate_markdown.yml 1、创建github项目 目录&#xff1a; .github/workflows/fetch-news.yml actions执行yaml&#xff08;…
阅读更多...
C语言 | Leetcode C语言题解之第397题整数替换

C语言 | Leetcode C语言题解之第397题整数替换

题目&#xff1a; 题解&#xff1a; //第一种动态规划:超时 // class Solution { // public: // int integerReplacement(int n) { // vector<int>dp(n1,0); // dp[1]0; // for(int i2;i<n;i){ // if(i%20){ // …
阅读更多...
Vue接入高德地图并实现基本的路线规划功能

Vue接入高德地图并实现基本的路线规划功能

目录 一、申请密钥 二、安装依赖 三、代码实现 四、运行截图 五、官方文档 一、申请密钥 登录高德开放平台&#xff0c;点击我的应用&#xff0c;先添加新应用&#xff0c;然后再添加Key。 如图所示填写对应的信息&#xff0c;系统就会自动生成。 二、安装依赖 npm i am…
阅读更多...
学生签到系统小程序的设计

学生签到系统小程序的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;学生管理&#xff0c;教师管理&#xff0c;签到信息管理&#xff0c;学生签到管理&#xff0c;班课信息管理&#xff0c;加入班课管理&#xff0c;课程信息管理 微信端账号功能包括&#xff1a;系统首…
阅读更多...
C++（三）----内存管理

C++（三）----内存管理

1.C/C内存分布 看下面这个问题&#xff08;考考你们之前学的咋样&#xff09;&#xff1a; int globalVar 1; static int staticGlobalVar 1; void Test() {static int staticVar 1;int localVar 1;int num1[10] {1, 2, 3, 4};char char2[] "abcd";char* pCh…
阅读更多...
JDK 安装及配置教程（Windows）【安装】

JDK 安装及配置教程（Windows）【安装】

文章目录 一、 下载1. 官网下载2. 其它渠道 二、 安装三、 配置四、 验证五、 双 JDK 环境 软件 / 环境安装及配置目录 一、 下载 1. 官网下载 安装地址&#xff1a;https://www.oracle.com/ 打开浏览器输入网址 https://www.oracle.com/index.html&#xff0c;进入 Oracle …
阅读更多...
Python——turtle库（海龟绘图）介绍与使用

Python——turtle库（海龟绘图）介绍与使用

一、概述 在 Python 中&#xff0c;海龟绘图提供了一个实体“海龟”形象&#xff08;带有画笔的小机器动物&#xff09;&#xff0c;假定它在地板上平铺的纸张上画线。 二、运行环境 本文运行环境&#xff1a;Windows11&#xff0c;Python3.11&#xff0c;Pycharm2023.1.4 使…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023