菜单 搜索
首页 前端知识 ONLYOFFICE8.0部署集成(vue java)并配置存储为minio

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

2024-08-08 23:08:26 前端知识 前端哥 208 347 我要收藏

文章目录

  • 前言
  • 一、使用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>
  <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有：

  • 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

转载请注明出处或者链接地址：https://www.qianduange.cn//article/15097.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

Jquery （第三章笔记）

2024-08-18 00:08:37

jquery实现tab切换简单好用

2024-08-18 00:08:35

vue jQuery 混用实现 点击日历展示list

2024-08-18 00:08:34

推荐使用Zabuto Calendar：轻量级的jQuery日历插件

2024-08-18 00:08:33

jQuery Cookie 插件使用教程

2024-08-14 22:08:01

推荐一款强大的jQuery日期范围选择插件——jQuery Date Range Picker

2024-08-18 00:08:31

jQuery的DOM操作

2024-08-18 00:08:21

jQuery结构简析(1)，看这篇足矣了

2024-05-10 22:05:53

使用 echarts 数据发生变化，可图表却没有重新渲染

2024-08-18 00:08:12

echarts显示中国地图

2024-08-18 00:08:11

大家推荐的文章
1

npm的使用

2024-08-18 00:08:131000
2

JavaScript与jQuery：昔日王者与现代前端的交响曲【含代码示例】

2024-07-30 22:07:311000
3

在HTML和CSS当中运用显示隐藏

2024-06-17 09:06:541000
4

成为优秀的TS体操高手 之 TS 类型体操前置知识储备

2024-06-10 11:06:351000
5

django改了html网页没有变化,,前端页面居然没有对应变化?!修改了css文件但是前端页面没有反应

2024-06-06 10:06:201000
6

html简单网页代码：基于html关爱空巢老人网页设计与实现

2024-06-04 10:06:181000
7

jquery实现注册表单验证（仅供参考）

2024-06-07 00:06:411000
8

基于Echarts的高校就业数据可视化管理系统设计与实现（计算机毕业设计源码81461）

2024-05-29 10:05:301000
9

VUE3 Vite Pinia TypeScript项目笔记

2024-05-20 14:05:191000
10

轻松掌握数据库中JSON数据提取：json_extract函数用法详解

2024-05-09 11:05:011000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！