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

落魄实习生 2024-09-05 09:05:12 阅读 74

文章目录

前言一、使用docker安装onlyoffice8安装使用DockerDesktop方式命令行方式使用 HTTPS 运行展示

二、项目集成前端集成-vue3html方式后端集成-java

三、onlyoffice基础原理四、配置存储为minio1.onlyoffice配置文件挂载问题2.配置存储为minio3.验证切换minio存储是否生效1.测试方式一2.测试方式二

前言

之前也写过一个关于onlyoffice的文章，在上一篇中介绍了onlyoffice7.2版本的安装、简单的集成、和社区版、企业版、开发者版本的差异。

文章地址：https://blog.csdn.net/qq_43548590/article/details/129948103

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

一、使用docker安装onlyoffice8安装

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

官网地址

使用DockerDesktop方式

1.首先我们拉取docker镜像

在这里插入图片描述

2.等着镜像拉取完成，我们来启动它，点击右边的启动按钮

宿主机的目录或文件挂载到 Docker

我这里的挂载地址为

/Users/mac/Desktop/tools/docker/onlyoffice/documentServer/xxxx这里根据自己的地址选择

在这里插入图片描述

命令行方式

<code>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

下载包

<code>npm install --save @onlyoffice/document-editor-vue

页面代码

<template>

<DocumentEditor

id="docEditor"code>

documentServerUrl="https://ip:10086/"code>

:config="config"code>

/>

</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">code>
 <title></title>
 <script type="text/javascript" src="http://IP:10086/web-apps/apps/api/documents/api.js"></script>code>
 <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>code>
 
</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配置文件有如下这些：
 
 <code>请不要直接编辑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.测试方式一
 启用测试示例
 在服务器中运行这两个命令 <code>第一个命令为开启测试示例，第二个命令为添加到自启动
 
 
点击按钮来到测试示例页面进行测试
 
<code>值得注意的是如果这里使用localhost或者127.0.0.1访问都会出现 ‘无法保存文档’或者‘下载文件错误’的提示
 
我这里是创建了一个word文档，然后保存
 
2.测试方式二
 采用上边写的vue+springboot代码来测试
 
 
 为什么要配置存储为minio呢？
 按照正常开发流程，用户保存文件后我们的后端接收到文件地址后需要在程序中拉取文件然后再存储到自己的指定位置（minio）。这样就很麻烦服务端拉取文件再转存需要耗费大量的性能和带宽。
 onlyoffice文档转换完成后直接存到我们指定的minio中。但是storage属性是修改onlyoffice本地缓存为转变成对象存储。<code>文件缓存默认存储为1天，超过一天后会自动清理。
 
我这里采用的方式是获取到了回调地址后后端直接操作minio将文件复制转存到我指定的文件夹下。这样就省去了拉取文件再次保存的步骤。
 
 本文代码已经提交gitee https://gitee.com/luzhiyong_erfou/learning-notes/tree/master/onlyoffice

参数	描述	类型	默认值
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	定义一个外部主机，该主机将用于代替请求中指定的主机。	字符串	“”