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

已于 2024-08-01 13:43:52 修改
阅读量1.6k 收藏 14
点赞数 15
分类专栏： java 前端 文章标签： vue.js java 前端
于 2024-07-18 14:13:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43548590/article/details/140518958
版权
java 同时被 2 个专栏收录
49 篇文章 1 订阅
订阅专栏
前端
42 篇文章 1 订阅
订阅专栏

文章目录

前言

之前也写过一个关于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>
  <DocumentEditor
      id="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有：

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

落魄实习生
关注
  • 15
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
ONLYOFFICE部署与集成
MaySky5的博客
07-07 1万+
协作型的在线文档编辑软件，高度兼容MS Office格式。可进行权限控制，包括复制、下载、编辑等。
Onlyoffice服务调用Demo-Java版本
03-22
Onlyoffice服务调用Demo-Java版本, ONLYOFFICE Document Server提供文档协作的服务功能，支持Word，Excel和PowerPoint的协作。但是这里告诉我们，需要进行文档管理和存储的二次开发。 Please note, that ONLYOFFICE Document Server includes the documenteditor, document editing service, document command service and documentconversion service.The document manager and documentstorage service areeither included to Community Server or must be implemented by the softwareintegrators who use ONLYOFFICE Document Server on their own server. 它自己的ONLYOFFICE/CommunityServer就是管理文件用的。 ONLYOFFICE CommunityServer is a free open source collaborative system developed to managedocuments, projects, customer relationship and email correspondence, all in oneplace.
office在线编辑ONLYOFFICE集成java和前端
10-09
office在线编辑ONLYOFFICE集成java和前端office在线编辑ONLYOFFICE集成java和前端office在线编辑ONLYOFFICE集成java和前端office在线编辑ONLYOFFICE集成java和前端office在线编辑ONLYOFFICE集成java和前端
onlyOffice实现office在线编辑java和前端demo
02-17
ONLYOFFICE集成java和前端
zdppy+onlyoffice+vue3解决文档加载和文档强制保存时弹出警告的问题
最新发布
Python私教
07-08 1752
参考的是官方的 https://github.com/ONLYOFFICE/document-server-integration/releases/latest/download/Python.Example.zip 基于Django的Python代码。通过上面的代码我们发现，它的返回的类型不是JSON类型，而我们原本的返回类型是JSON类型，所以做了一个尝试，将我们的返回类型改成了纯文本类型。这次排查，确保我们的回调地址是能用的，返回的也是 {“error”: 0}，但是没用！必须要返回纯文本类型！
OnlyOffice官网示例Java代码
01-24
在官网代码基础上进行了修改，可直接运行，只需修改服务器IP。
前端vue使用onlyoffice控件实现word在线编辑、预览（仅列出前端部分需要做的工作，不包含后端部分）
个人博客
06-28 4103
ONLYOFFICE 文档 是一个开源办公套件，包括文本文档、电子表格、演示文稿和可填写表单的编辑器。它提供以下功能：创建、编辑和查看文本文档、电子表格、演示文稿和可填写表单；与其他队友实时协作处理文件。基于这个控件，可以实现前端word、excel、pdf等文件在线编辑、预览，可以说非常强大，目前项目中只使用到word编辑预览，但拓展其他文件也非常简单，完善类型传参，更改onlyoffice配置参数中的文件类型即可。
OnlyOffice配置minio文件存储
LmingAn的博客
04-15 1664
OnlyOffice切换minio文件存储
vue2 集成 Onlyoffice_vue onlyoffice
2401_85124621的博客
06-10 1135
a、b、
onlyoffice+vue集成
qq_42061351的博客
05-05 5552
1、Document Server 53522可以改成你的端口（云服务器记得开权限），注意/var/lib/onlyoffice/documentserver/App_Data/cache/files 注意上面的cache/files，是通过docker exec -it 3a3afa942911(这个是docker ps看到的container的id) bash 然后用find / -name *.docx 这样搜索所有的docx格式的文件，找到的cache files，这里存的是修改后还未保存的fil
OnlyOffice 结合 Vue
cai454692590的博客
07-15 2338
OnlyOffice vue
springboot vue 初步集成onlyoffice
Mr_Wanter
08-08 5219
对接onlyoffice，实现文档的预览和在线编辑功能。
运用vue+springcloud微服务框架，集成minio分布式文件系统，实现的网盘系统
05-15
运用vue+springcloud微服务框架，集成minio分布式文件系统，实现的网盘系统 运用vue+springcloud微服务框架，集成minio分布式文件系统，实现的网盘系统 运用vue+springcloud微服务...
vue+spring boot+maven+SQLSERVER+REDIS+MINIO+JENKINS+dockers生产调度
01-06
Vue.js 和 Spring Boot 负责前端和后端的交互，Maven 管理构建过程，SQLSERVER 存储核心数据，Redis 提升数据处理速度，MINIO 处理对象存储，Jenkins 实现自动化部署，而 Docker 则保证了环境的可移植性和一致性。...
学生成绩管理系统系统框架html + css + vue + java + springboot +mysql mysql8.0
04-27
mysql8.0 http://localhost:8081/#/index/ 角色介绍 管理员 admin 123456 教师 学生 模块介绍 管理员 登录模块 首页模块 个人中心 学生管理 教师管理（模块vue，包括论文，ppt：丘,vue,vscode） 班级管理...
springboot+vue前后端完整demo.zip
06-10
【标题】"springboot+vue前后端完整demo.zip"是一个包含使用Spring Boot后端框架与Vue.js前端框架构建的完整示例...通过深入研究并模仿这个示例，你可以掌握现代Web应用开发的关键技术，并为自己的项目奠定坚实的基础。
onlyoffice展示在线文档
08-14
使用Java程序编写，传入在线文档的url，调用onlyoffice展示在线文档。压缩包中只包含代码，不包含onlyoffice的部署步骤。建议onlyoffice使用Docker部署。
onlyoffice的介绍搭建、集成过程。Windows、Linux
世上哪有什么岁月静好,不过是有人替你负重前行
10-16 3654
在本地服务器上安装ONLYOFFICE Docs Community EditionCommunity Edition允许您在本地服务器上安装ONLYOFFICE文档，并将在线编辑器与ONLYOFFICE协作平台或其他流行系统集成。ONLYOFFICE Docs是一个在线办公套件，包括文本、电子表格和演示文稿的查看器和编辑器，完全兼容office Open XML格式：.docx、.xlsx、.pptx，并支持实时协作编辑。
vue+springboot集成onlyoffice
10-22
Vue和Spring Boot都是非常流行和强大的开发框架，集成OnlyOffice可以提供一个完整的在线文档协作和编辑平台。 OnlyOffice是一个强大的在线办公套件，它支持多人协同编辑文档、电子表格和演示文稿等。Vue是一个用于构建用户界面的JavaScript框架，而Spring Boot是一个用于构建Java应用程序的框架。集成OnlyOffice即意味着我们可以在Vue和Spring Boot应用程序中实现在线文档协作和编辑功能。 在集成OnlyOffice时，首先我们需要在Vue中引入OnlyOffice的JavaScript SDK或使用其提供的Vue组件。这些组件可以用来在Vue应用程序中显示OnlyOffice文档编辑器。我们还可以使用OnlyOffice的API来实现文档的上传、下载和保存等功能。 在后端，我们可以使用Spring Boot提供的RESTful API来处理与OnlyOffice编辑器的交互。通过这些API，我们可以接收来自编辑器的请求并提供文档的相关操作，比如保存、下载和协同编辑等。 为了实现真正的协同编辑功能，我们可以使用WebSocket技术来实现实时通信。Vue和Spring Boot都有相应的WebSocket支持，我们可以使用它们来建立客户端和服务器之间的双向通信，以便在多个用户之间实现文档的协同编辑。 总结来说，Vue和Spring Boot集成OnlyOffice可以为我们提供一个完整的在线文档协作和编辑平台。在前端，我们可以使用Vue和OnlyOffice的JavaScript SDK或Vue组件来实现在线文档编辑器的显示和操作。在后端，使用Spring Boot提供的API来处理与OnlyOffice编辑器的交互，并借助WebSocket技术实现实时通信和协同编辑功能。通过这样的集成，我们可以轻松构建一个强大的在线文档协作平台。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值