关于在RuoYi前后端分离项目中集成onlyoffice在线预览编辑保存及多人协同编辑功能的描述

方法各不相同,有的是直接集成在项目代码中,这个需要大量的编写代码。其次最普遍的就是windows在docker中搭建onlyoffice服务,然后通过调用的方式实现在线编辑和协同编辑的功能

docker的官网地址  Docker ,正常下一步下一步。安装就配置下

"registry-mirrors": [
    "https://hub.rat.dev",
    "https://docker.1panel.live"
  ]

接下来最好是下载wls2然后装一下Ubuntu(这步应该可以选择,不强制,方便后面查询日志好用点,我看很多推荐都是装的,所以我就装了。。。。。,具体可以查一下)

docker装好后也配置好了,以管理员身份运行cmd(命令行),

运行docker pull onlyoffice/documentserver:latest(最好挂个梯子,这个会快一点)

这个时候就可以通过命令启动onlyoffice服务了   docker run -i -t -d --name onlyoffice-document-server  -p 4396:80 -e JWT_ENABLED=false onlyoffice/documentserver  ,我的命令的意思是启动名称为onlyoffice-documentserver的onlyoffice服务,在docker的80端口,浏览器则通过4396端口可访问到,JWT_ENABLED=false最为关键,我这边是关闭token的校验的,因为之前启动服务没有加上这个,点击文件访问onlyoffice服务是一直报校验码格式错误的问题,,这个问题我不太会解决,所以干脆直接把校验给关闭,这样就可以解决校验码格式错误的问题了。通过127.0.0.1:4396就可校验是否正常启动服务了

,然后这里正常在自己的开发环境还会碰见,onlyoffice报错,说无法打开文件,可以通过docker logs 1d06861b27e4698d07bc3b1219e6901d9a0b09f5797bc65a9af54e292d89dda2(自己的onlyoffice服务id)去看onlyoffice的日志,可以看到错误详情,大部分应该是onlyoffice拒绝私有地址(192.168.x.xx)访问,解决这个问题的话直接去修改相关配置文件即可

docker exec -it onlyoffice-documentserver /bin/bash   (这个的意思是访问名称为onlyoffice-documentserver的onlyoffice)

cd /etc/onlyoffice/documentserver (进入这个目录)

nano default.json  (修改这个文件)

"request-filtering-agent" : {
        "allowPrivateIPAddress": true,
        "allowMetaIPAddress": true
},修改好了,就重启服务

接下来就是自己的业务代码了首先是前端vue部分

1.跳转的方法(打开预览文件的页面id是文件的id)

首先,你需要在你的 layuiAdmin 前端项目中添加Office 的 JavaScript SDK。可以在 OnlyOffice 官下载最新版本的 SDK,然后将其添加到你的前端项目中。 接下来,你需要在 jeecgboot 后端项目中进行一些配置。具体步骤如下: 1. 在 jeecgboot 项目中创建一个名为 "onlyoffice" 的文件夹,用于存放 OnlyOffice 相关的文件。 2. 下载 OnlyOffice 文档服务器的 Docker 镜像。你可以在 OnlyOffice 官网找到 Docker 镜像的下载链接。 3. 使用 Docker 运行 OnlyOffice 文档服务器。你可以使用以下命令在本地运行 OnlyOffice 文档服务器: ``` docker run -i -t -d -p 80:80 onlyoffice/documentserver ``` 4. 修改 jeecgboot 的配置文件,以便允许 OnlyOffice 访问 jeecgboot 的 API。在 application.yml 文件中添加以下配置: ``` cors: allowed-origins: "*" allowed-methods: "*" allowed-headers: "*" allow-credentials: true ``` 5. 创建一个名为 "OnlyOfficeController" 的 Java 类,用于处理与 OnlyOffice 相关的请求。在该类中添加以下方法: ``` @GetMapping("/onlyoffice/config") public Map<String, Object> getConfig() { String serverUrl = "http://localhost:80"; String secret = "mysecret"; String filePath = "/path/to/my/document.docx"; Map<String, Object> config = new HashMap<>(); config.put("document", new HashMap<>()); config.put("documentType", "text"); config.put("editorConfig", new HashMap<>()); config.put("token", OnlyOfficeUtils.generateToken(serverUrl, secret, filePath)); return config; } ``` 在该方法中,你需要替换 "serverUrl"、"secret" 和 "filePath" 为你自己的值。这些值可以在 OnlyOffice 文档服务器中找到。 6. 在 layuiAdmin 前端项目中添加一个名为 "onlyoffice.html" 的页面。在该页面中添加以下代码: ``` <div id="placeholder"></div> <script src="onlyoffice/sdk.js"></script> <script> var docEditor = new DocsAPI.DocEditor("placeholder", { "document": { "fileType": "docx", "url": "/api/onlyoffice/config", "key": "mysecret" } }); </script> ``` 在该代码中,你需要修改 "url" 和 "key" 的值,使其与你的 OnlyOffice 配置文件中的值匹配。 7. 在 layuiAdmin 前端项目的路由配置中添加一个名为 "onlyoffice" 的路由,将其指向刚才创建的 "onlyoffice.html" 页面。 ``` { path: '/onlyoffice', name: 'OnlyOffice', component: () => import('@/views/onlyoffice.html') } ``` 现在,你已经完成了将 OnlyOffice 集成到 jeecgboot 前后端分离项目的步骤。你可以访问前端页面,打开 OnlyOffice 编辑器,编辑任何文档并保存到 jeecgboot 后端项目中。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值