onlyoffice基础环境搭建+部署+demo可直接运行 最简单的入门

office这个体系分为四个大教程

        1、【document server文档服务器基础搭建】

        2、【连接器(connector)或者jsApi调用操作office】-进阶

        3、【document builder文档构造器使用】-进阶

        4、【Conversion API(文档转化服务)】-进阶

         如果需要连接器,可以查看:onlyofficeV7.5.1 jsApi调用 进阶开发 二次开发 连接器(connector)开发 - 知乎 (zhihu.com)

1、onlyoffice软件本身的部署

        这里主要介绍docker版本,因为在学习过程中发现,onlyoffice本身很大,最好还是独立部署一台服务器,避免和其他资源冲突,所以结合当前的技术路线,docker是比较好的选择。

2、拉取docker镜像,并启动

        2.1、首先我们拉取docker镜像,推荐先用7.3.3进行测试,从7.5之后启动需要带有token标识,太麻烦,图例用的是windows下的docker desktop,linux下同理,可以使用docker的web界面管理工具进行操作比如:macrozheng:吊炸天的 Docker 图形化工具 Portainer,必须推荐给你!

图1、拉取镜像

        2.2、等着镜像拉取完成,我们来启动它,点击右边的启动按钮

图2、准备启动

        2.3、之后会打开一个配置框,这里就看个人了,我习惯映射一个端口。【注意】7.3之后,最好加上JWT_ENABLED这个配置,不然会有问题,毕竟官方开始收费了。

图3、启动配置

        2.4、接下来等着启动完成就可以了,日志大概是这样的

图4、启动日志图例

------------------------------------以上为office软件本身的部署-------------------------------

3、集成html或者vue

        3.1、这里使用html原生最为直观,vue也一样,只是封装了几个方法。

        3.2、onlyoffice编辑器需要如下几个必须配置才可以正常使用

1、config配置
config的完整文档:https://api.onlyoffice.com/editors/config/
我们下面使用【必要参数】的简化做讲解2、callback回调
回调的最要说明,status:https://api.onlyoffice.com/editors/callback
回调是后端的实现,只有一个目的,接受office保存文件通知,然后你就可以拿到前端保存文件进行操作比如:上传minio、保存到本地等等

        3.3、config样例,这个样例可以直接使用不用调整

var config = {"documentType": "word","document": {"title": "【经营】通用合同模板.docx","url": "https://d2nlctn12v279m.cloudfront.net/assets/docs/samples/zh/demo.docx",// 当前用户对于当前文档的操作权限"permissions": {"print": false,"download": true},"fileType": "docx",onlyoffice用key做文件缓存索引,推荐每次都随机生成一下,不然总是读取缓存"key": "e932e7bb1e4d449aa9a7d8ss517"},"editorConfig": {// 编辑器常规配置"customization": {// 自动保存可以关闭,常规ctrl+s更好用"autosave": false,"compactToolbar": true,"forcesave": true,"toolbarNoTabs": true,"help": false,"compactHeader": true,"hideRightMenu": true,},"mode": "edit",这个回调及其的重要"callbackUrl": "https://www.onlyoffice.com/post.ashx?type=editor-callback",// 菜单显示语言"lang": "zh-CN",// 当前操作用户信息"user": {"name": "曹瑞剑雄","id": "103"}}};

        【url】一定使用真实的IP或者域名,不要使用127.0.0.1或者localhost

        因为office容器/服务器,不是你的localhost,它需要读取你电脑上的文件,只能有真实IP/域名。

        【callbackUrl】,开放所有方法,不要指定只能用get或者post。

        前期调试的时候,直接返回{"error":0}就可以,等调通后再考虑逻辑处理。

        3.4、后端样例,包含:status说明和接收信息流实现

public enum OnlyOfficeCallBackStatus {SUCCESS(0, "通用"),EDIT(1, "正在编辑文档"),READY_TO_SAVE(2, "文档已准备好保存"),SAVE_ERROR(3, "发生文档保存错误"),CLOSE_NO_CHANGE(4, "文档已关闭,没有任何更改"),SAVE(6, "保存"),FORCE_SAVE_ERROR(7, "强制保存文档时发生错误"),;private final Integer code;private final String message;OnlyOfficeCallBackStatus(Integer code, String message) {this.code = code;this.message = message;}public boolean equals(Integer code) {return this.code.equals(code);}
}

service实现,仅供参考,用什么语言都行。

/*** 回调*/@Overridepublic String callback(HttpServletRequest request, HttpServletResponse response) throws IOException {log.info("传入的参数:" + request.getParameterMap());String body = "";try {Scanner scanner = new Scanner(request.getInputStream());scanner.useDelimiter("\\A");body = scanner.hasNext() ? scanner.next() : "";scanner.close();} catch (Exception ex) {return "";}if (body.isEmpty()) {throw new IOException("ONLYOFFICE回调保存请求体未空");}JSONObject jsonObj = JSONUtil.parseObj(body);log.info("body数据:" + jsonObj);int status = jsonObj.getInt("status");if (status == 2 || status == 3 || status == 6){String serverFielUrl = jsonObj.getStr("url");HttpResponse res = HttpRequest.get(serverFielUrl).execute();InputStream in = res.bodyStream();// 模板路径String fileName = cn.hutool.core.lang.UUID.randomUUID().toString().replace("-", "") + "_create." + jsonObj.getStr("filetype");String templatePath = getClass().getClassLoader().getResource("").getPath();templatePath += fileName;log.info("文件保存地址:" + templatePath);File tempFile = new File(templatePath);try {FileUtils.copyInputStreamToFile(in, tempFile);} catch (IOException e) {e.printStackTrace();}}return "{\"error\":0}";}

4、前端的demo,可以直接运行,我这边搭建了体验服务器版本为:7.5.1

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script type="text/javascript" src="http://47.94.91.67:10100/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://d2nlctn12v279m.cloudfront.net/assets/docs/samples/zh/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://www.onlyoffice.com/post.ashx?type=editor-callback","lang": "zh-CN","user": {"name": "曹瑞剑雄","id": "103"}}};var docEditor;initDocEditor();/*** 初始化编辑器*/function initDocEditor() {// 初始化配置config['events'] = {onDocumentReady: onDocumentReady};docEditor = new DocsAPI.DocEditor("placeholder", config);}</script></html>

整个代码的核心就是:docEditor =newDocsAPI.DocEditor("placeholder", config);这句话, 包含两个参数: 第一个参数是需要使用的渲染容器ID,比如div 第二个就是初始化编辑器所需要的配置信息

----------------------------------以上是先跑起来的步骤------------------------------------

5、onlyoffice基础原理讲解

        5.1、office本身有:DOCUMENT SERVER(文档服务器)、DOCUMENT BUILDER(文档生成器)、 Conversion API(转化API)

        对于绝大部分公司的业务,目前只用到DOCUMENT SERVER(文档服务器)就可以了,其他的进阶教程【后续补充】

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

5.2、DOCUMENT SERVER(文档服务器)前后端如何进行交互,这里借用一个图

交互流程

简单来说就是:前端操作->onlyoffice->你的后端callback 如果你有做过微信之类的回调就会比较清晰,office服务器作为中介,用于处理前端与后端的连通。 除此之外,再无其他。

6、结语

        如果你看到了这里,发现想调用前端API操作word等等,那么你需要看进阶教程了。

比如:

        jsAPi操作office文档,官方叫做connector(链接器)

        替代poi、easyExcel、phpExcel等后端操作office文档等

        有word、excel、pdf、html等相互转化需求的

7、进阶教程正在编写,包含上面所关心的内容

        2、【连接器(connector)或者jsApi调用操作office】-进阶

        3、【document builder文档构造器使用】-进阶

        4、【Conversion API(文档转化服务)】-进阶

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

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

相关文章

IO进程线程day4

1.思维导图 2.使用多进程完成两个文件的拷贝&#xff0c;父进程拷贝前一半&#xff0c;子进程拷贝后一半&#xff0c;父进程回收子进程的资源。 #include<myhead.h>int main(int argc, const char *argv[]) {//判断终端输入的参数是否合法if(argc!3){printf("input…

计算机网络Day1--计算机网络体系

1.三网合一 电信网络、广播电视网络、计算机网络&#xff08;最基础最重要发展最快&#xff09; 2.Internet 名为国际互联网、因特网&#xff0c;指当前全球最大的、开放的、由众多网络相互连接而成的特定互连网&#xff0c;采用TCP/IP 协议族作为通信的规则&#xff0c;前…

stm32——hal库学习笔记(定时器)

这里写目录标题 一、定时器概述&#xff08;了解&#xff09;1.1&#xff0c;软件定时原理1.2&#xff0c;定时器定时原理1.3&#xff0c;STM32定时器分类1.4&#xff0c;STM32定时器特性表1.5&#xff0c;STM32基本、通用、高级定时器的功能整体区别 二、基本定时器&#xff0…

【C++】1143 - 纯粹合数

问题 一个合数&#xff0c;去掉最低位&#xff0c;剩下的数仍是合数&#xff0c;再去掉剩下的数的最低位&#xff0c;余留下来的数还是合数&#xff0c;这样反复&#xff0c;一直到最后剩下的一位数仍是合数&#xff1b;我们把这样的数称为纯粹合数。求所有的三位纯粹合数。 1…

多目图像拼接算法

图像拼接一般要经过图像特征提取、特征匹配、融合等步骤来实现。 特征匹配与变换: SIFT(尺度不变特征变换)SURF(加速鲁棒特征)ORB(Oriented FAST and Rotated BRIEF)AKAZE(加速的KAZE特征)全景图像拼接算法: 基于特征匹配的拼接:利用特征点匹配找到重叠区域,然后进…

YOLO-World:实时开放词汇目标检测

paper&#xff1a;https://arxiv.org/pdf/2401.17270.pdf Github&#xff1a;GitHub - AILab-CVC/YOLO-World: Real-Time Open-Vocabulary Object Detection online demo&#xff1a;https://huggingface.co/spaces/stevengrove/YOLO-World 目录 0. 摘要 1. 引言 2. 相关工…

HCIA-HarmonyOS设备开发认证V2.0-IOT硬件子系统-WatchDog

目录 一、 WATCHDOG 概述功能简介基本概念 二、WATCHDOG 模块相关API三、WATCHDOG HDF驱动开发3.1、开发步骤(待续...) 坚持就有收获 一、 WATCHDOG 概述 功能简介 看门狗&#xff08;Watchdog&#xff09;&#xff0c;又称看门狗计时器&#xff08;Watchdog timer&#xff0…

C++ 之LeetCode刷题记录(三十二)

&#x1f604;&#x1f60a;&#x1f606;&#x1f603;&#x1f604;&#x1f60a;&#x1f606;&#x1f603; 开始cpp刷题之旅。 目标&#xff1a;执行用时击败90%以上使用 C 的用户。 7. 整数反转 给你一个 32 位的有符号整数 x &#xff0c;返回将 x 中的数字部分反转后…

阿赵UE学习笔记——16、渲染性能相关

阿赵UE学习笔记目录 大家好&#xff0c;我是阿赵。   继续学习虚幻引擎的使用。上一篇说了灯光的移动性问题&#xff0c;这一篇来看看怎样去辨别灯光性能的好坏。   虚幻引擎里面有一组显示模式是专门用来看场景当前的灯光和网格渲染的&#xff0c;叫做优化试图模式&#x…

【Vue】fabricjs 实现局部截图及el-image-viewer大图预览

<!DOCTYPE html> <html lang"zh-CN"> <head> <meta charset"UTF-8"> <title>使用fabric.js裁剪和显示图片</title> <script src"https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.5.0/fabric.min.js"…

adb-环境安装

1. 下载解压包&#xff1a;百度网盘 请输入提取码百度网盘为您提供文件的网络备份、同步和分享服务。空间大、速度快、安全稳固&#xff0c;支持教育网加速&#xff0c;支持手机端。注册使用百度网盘即可享受免费存储空间https://pan.baidu.com/s/1TDu2fzGbqCyug3wCSmV9oQ?pwd…

UI美化stylesheet

一、网上找到自己喜欢的图标 大家可以每个图标类型找出三种不同的颜色&#xff0c;方便后续美化效果&#xff0c;这里我每种只找了一个。&#xff08;随便找的&#xff0c;最后效果不好看&#xff09; 将这个文件夹复制到项目的文件夹中。 然后右键Add New…选择QT&#xff0c…

list链表

1. list基本概念 功能&#xff1a;将数据进行链式存储 链表&#xff08;list&#xff09;是一种物理存储单元上非连续的存储结构&#xff0c;数据元素的逻辑顺序是通过链表中的指针链接实现的 链表的组成&#xff1a;链表由一系列结点组成 结点的组成&#xff1a;一个是存储数据…

阿里云OSS和SEC服务器,免费ssl证书申请和安装

一&#xff1a;阿里云OSS证书申请和安装 1创建免费证书等待签发 2验证&#xff0c;复制DNS解析配置 3在主体域名中解析DNS&#xff08;记录复制上面的证书申请配置&#xff09; 4验证域名DNS配置 5下载证书 6安装OSS证书 7上传证书&#xff08;下载的证书解压&#xff09…

Paddlepaddle使用自己的VOC数据集训练目标检测(0废话简易教程)

一 安装paddlepaddle和paddledection&#xff08;略&#xff09; 笔者使用的是自己的数据集 二 在dataset目录下新建自己的数据集文件&#xff0c;如下&#xff1a; 其中 xml文件内容如下&#xff1a; 另外新建一个createList.py文件&#xff1a; # -- coding: UTF-8 -- imp…

探索水下低光照图像检测性能,基于DETR(DEtection TRansformer)模型开发构建海底生物检测识别分析系统

海底这类特殊数据场景下的检测模型开发相对来说比较少&#xff0c;在前面的博文中也有一些涉及&#xff0c;感兴趣的话可以自行移步阅读即可&#xff1a; 《尝试探索水下目标检测&#xff0c;基于yolov5轻量级系列模型n/s/m开发构建海底生物检测系统》 《基于YOLOv5C3CBAMCBA…

app逆向-平头哥框架ratel使用

文章目录 一、前言二、实现逻辑1、安装ratel手机端app2、使⽤电脑端进⾏感染目标app3、开发⼀个平头哥插件 一、前言 平头哥&#xff08;ratel&#xff09;是⼀个Android逆向分析⼯具套件&#xff0c;他提供⼀系列渐进式app逆向分析⼯具。同时平头哥也是⼀个app⼆次开发的沙箱…

【运维】站点可靠性工程介绍:研发,运维,SRE,Devops的关系

文章目录 1、什么是SRE2、SRE与研发、运维的区别 1、什么是SRE 站点可靠性工程&#xff08;SRE&#xff09; 是 IT 运维的软件工程方案。 SRE 团队使用软件作为工具&#xff0c;来管理系统、解决问题并实现运维任务自动化。 SRE 执行的任务以前通常由运维团队手动执行&#x…

Elasticsearch:创建自定义 ES Rally tracks 的分步指南

作者&#xff1a;Alejandro Snchez 按照这个综合教程学习如何制作个性化的 Rally tracks ES Rally 是什么&#xff1f;它的用途是什么&#xff1f; ES Rally 是一个用于在 Elasticsearch 上测试性能的工具&#xff0c;允许你运行和记录比较测试。 做出决策可能很困难&#x…

OpenCV统计函数之minMaxLoc和meanStdDev

在OpenCV中&#xff0c;minMaxLoc和meanStdDev是两个用于统计图像或数组中元素的基本特性的函数。这些统计函数对于图像处理、特征提取和数据分析非常有用。 minMaxLoc minMaxLoc函数用于查找数组或图像中的最小值和最大值&#xff0c;并可选地返回这些值的位置。这在处理图像…