当前位置： 首页 > news >正文

springboot+vue项目如何集成onlyoffice开源文档组件

news 2025/9/21 15:38:37

一、onlyoffice是什么

ONLYOFFICE 是一个开源的办公套件，适合多人在线协作。由总部位于总部在拉脱维亚的 IT 公司Acensio System SIA 开发。它提供在线协作文档编辑器（包括文档、电子表格、演示文稿和表单），适用于 Windows、Linux、macOS、Android 和 iOS 系统。也可以将 ONLYOFFICE 集成到学习管理平台、同步与共享平台、企业管理系统等，甚至集成到你自己的应用程序中。ONLYOFFICE同微软office、金山WPS的功能相似，可以看成是同一类软件产品，但ONLYOFFICE的源代码是开源的。另外，表单Forms是ONLYOFFICE 的一大特色功能，能直接在编辑器内创建表单，可以实现类似于web表单功能和精细化权限控制。

ONLYOFFICE比MS OFFICE、WPS更强大的功能就是插件机制，支持安装丰富的插件，比如OCR、ChatGPT、自动翻译、视频通话、文本转换、生成参考文献、拼写检查等，大部分插件都免费使用的，可以在线安装。

ONLYOFFICE支持集成ChatGPT插件。ChatGPT是由人工智能研究实验室OpenAI在2022年11月30日发布的全新聊天机器人模型，一款技术驱动的自然语言处理工具。它能够通过学习和理解人类的语言来进行对话，还能根据聊天的上下文进行互动，真正像人类一样来聊天交流，甚至能完成撰写邮件、视频脚本、文案、翻译、代码等任务。在插件管理器中，找到 ChatGPT 并点击安装。

运行ChatGPT,输入对应的密钥（需要通过科学上网，在OpenAI官网 (opens new window)中获取API Key，目前国内用户无法注册获取。 ），然后就在可以在onlyoffice中使用ChatGPT了。

ONLYOFFICE的插件机制为开发者提供了极大灵活性，开发者可以通过底层API接口自定义插件实现业务上复杂需求，比如：协同办公OA项目收发文的正文创建、编辑和下载；合同管理项目中合同协议的自动生成等。云程低代码开发平台（http://www.yunchengxc.com）对开源版ONLYOFFICE进行了集成整合，可以表单和流程中直接使用office文档控件，并可配置文档模版路径，表单字段值自动带入，控制文档是否可编辑，文档是否只读，是否加载水印，是否可以打印，是否可以另存下载，是否需要留痕，是否显示留痕等权限。

二、项目如何集成onlyoffice

在springboot+vue项目中集成开源版onlyoffice组件，如果是私有化部署的项目，首先需要部署onlyoffice后端服务，然后使用onlyoffice的前端API进行web集成调用。

1、安装onlyoffice后端服务

onlyoffice后端服务安装依赖RabbitMQ、Redis、PostgreSQL这些服务，支持在windows、Linux下安装，也支持docker安装。安装方法这里不再展开描述，详细请参考官方安装文档：https://www.onlyoffice.org.cn/guide/docker-onlyoffice.html

2、Web前端集成onlyoffice

 onlyoffice提供了基于Javascript的API接口，

https://documentserver/web-apps/apps/api/documents/api.js

Web前端调用示例如下：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>ONLYOFFICE使用方法</title><!-- 引入外部JavaScript文件 --><script type="text/javascript" src="https://documentserver/web-apps/apps/api/documents/api.js"></script></head><body><div id="placeholder"></div><script language="javascript" type="text/javascript">var docEditor = new DocsAPI.DocEditor("placeholder",{"document": {"fileType": "docx","key": "Khirz6zTPdfd7","title": "Example Document Title.docx","url": "https://example.com/url-to-example-document.docx"},"documentType": "word","editorConfig": {"callbackUrl": "https://example.com/url-to-callback.ashx"}});</script></body></html>

另外，onlyoffice还提供了vue、React 、Angular 语言的组件，可以在您的项目中从 npm 安装 ONLYOFFICE 文档相关组件

npm install --save @onlyoffice/document-editor-vue

npm install --save @onlyoffice/document-editor-react

npm install --save @onlyoffice/document-editor-angular

3、onlyoffice关键功能的API接口

业务系统中集成onlyoffice，常常涉及到的功能有：模版路径配置，表单字段自动带值，文档是否可编辑，文档是否只读，是否加载水印，是否可以打印，是否可以另存下载，是否需要留痕，是否显示留痕等权限，onlyoffice分别提供了相关的API接口。

序号

onlyoffice功能点/权限

对应onlyoffice的API接口/参数

1

表单字段自动带值

对应插件里写法：

window.Asc.plugin.executeMethod ("GetFormsByTag", [标签名], function (res) {

this.Asc.plugin.executeMethod ("SetFormValue", [res[0].InternalId,”设置的值”]);

});

2

文档是否可编辑

editorConfig.mode 值edit:编辑 view:预览

同时document.permissions.edit 值设置为true

3

是否可以打印

document.permissions.print 值设置为true

4

是否可以另存下载

document.permissions.download值设置为true

5

是否需要留痕

document.permission.edit 设置为 false(该值设置为true则用户自己能够编辑文档，接受/拒绝所做的更改并切换到审阅模式)

document.permission.review 设置为 true

editorConfig.mode 设置为edit

6

是否显示留痕

editorConfig.customization.review.reviewDisplay

markup - 标记批注框

simple - 仅标记

final - 最终版(不可编辑)

original - 原始版(不可编辑)

更多api请参考官方文档：https://api.onlyoffice.com

4、自定义插件实现表单字段自动带值

在OA电子公文、合同管理等业务系统中，常常需要把web表单字段的值自动带入到word文档中，比如：合同编号、合同标题等字段，如果使用微软office，可以使用窗体域结合vba编程，实现字段值自动同步。Onlyoffice 提供了强大的插件机制，可以自定义插件插件实现表单字段值自动带入功能。

我们先来看下onlyoffice插件目录结构：

.

├── config.json      # 插件配置文件

├── icon.png         # 插件图标

├── index.html       # 插件入口文件

├── interface.js     # 插件功能实现

├── plugins.js       # 插件主程序入口文件

└── translations     # 国际化配置

    └── zh-CN.json

插件结构非常简单，里面主要是 config.json、index.html、plugins.js 和 interface.js。需要保证config.json、index.html、interface.js、plugins.js这四个文件在同一个文件夹当中, 然后将文件夹放入到容器内的/var/www/onlyoffice/documentserver/sdkjs-plugins目录下, 重启即可。

# config.json参数说明

{"guid": "asc.{11700c35-1fdb-4e37-9edb-b31637139601}","variations": [{"url": "index.html","EditorsSupport": ["word", "cell", "slide"],"isSystem": true,"initDataType": "none","initData": "","buttons": [],"events" : ["onClick"]}]}

- guid：插件的唯一值, 可自行更改, 但格式必须是asc.{}

- url: 在本插件中该html的作用主要是用来加载js

- EditorsSupport：声明该插件在word、excel、ppt可用

- isSystem：设置该值为true后在菜单栏中不显示该插件, 后台自动运行该插件

- events：声明事件

其他参数请看官方文档：https://api.onlyoffice.com/plugin/config

plugins.js一般在onlyoffice容器内的/var/www/onlyoffice/documentserver/sdkjs-plugins/v1目录下, 可以直接从里边拿过来复用。

 interface.js就是插件功能的逻辑了，以下是interface.js代码，主要实现了表单字段自动带值功能。

(function(window, undefined) {var AscPlugin = window.Asc.plugin;var executeMethod = function(method, arg) {return window.Asc.plugin.executeMethod(method, arg);};AscPlugin.init = function(initData) {// 避免绑定多次if(!window['boundInternalcommand']){// 该事件监听似乎在7.x版本后就失效了 我还没尝试过window.parent.Common.Gateway.on('internalcommand', function(args) {// 如果需要自定义插件的功能, 只需要在这个方法里接受参数写逻辑就行var data = args.data;var command = args.command;//设置表单字段值if(command=="SetFormValue"){window.Asc.plugin.executeMethod ("GetFormsByTag", [data[0]], function (res) {this.Asc.plugin.executeMethod ("SetFormValue", [res[0].InternalId,data[1]]);});}else if(command=="GetFileToDownload"){//获取文件window.Asc.plugin.executeMethod ("GetFileToDownload", Array.isArray(data) ? data : [data], function(res){var obj = {"cmd":"GetFileToDownload","url":res}window.parent.parent.postMessage(JSON.stringify(obj), "*");});}else{(Array.isArray(data) ? data : [data]).forEach(function(arg, index) {// 6.x版本中的api不支持批量的操作, 只能单个插入, 这里需要一个定时器才能做到批量的插入, 否则会报错或者什么都不插入setTimeout(function() {executeMethod(command, [arg]);}, 100 * index);});}});window['boundInternalcommand'] = true;}// 在插件弹出窗外释放鼠标时触发AscPlugin.onExternalMouseUp = function() {var event = document.createEvent('MouseEvents');event.initMouseEvent('mouseup', true, true, window, 1, 0, 0, 0, 0, false, false, false, false, 0, null);document.dispatchEvent(event);};AscPlugin.button = function(id) {// 关闭插件弹出窗触发if (id === -1) {this.executeCommand('close', '');}};};})(window, undefined);

核心代码：

window.Asc.plugin.executeMethod ("GetFormsByTag", [data[0]], function (res) {

this.Asc.plugin.executeMethod ("SetFormValue", [res[0].InternalId,data[1]]);

});

GetFormsByTag：根据标签获取表单控件

SetFormValue：设置表单控件值

插件调用：

this.docEditor.serviceCommand("SetFormValue", [tagName,value]);

最后实现的效果如下：

相关文章：

springboot+vue项目如何集成onlyoffice开源文档组件

一、onlyoffice是什么 ONLYOFFICE 是一个开源的办公套件&#xff0c;适合多人在线协作。由总部位于总部在拉脱维亚的 IT 公司Acensio System SIA 开发。它提供在线协作文档编辑器&#xff08;包括文档、电子表格、演示文稿和表单&#xff09;&#xff0c;适用于 Windows、Linu…...

编程日记 2023/11/25 6:24:29

Android okhttp3.0配置https信任所有证书

参考: Android okhttp3.0配置https的自签证书和信任所有证书 private OkHttpClient getHttpsClient() {OkHttpClient.Builder okhttpClient new OkHttpClient().newBuilder();//信任所有服务器地址okhttpClient.hostnameVerifier(new HostnameVerifier() {Overridepublic boo…...

编程日记 2023/11/25 6:22:26

大数据基础设施搭建 - Hive

文章目录 一、上传压缩包二、解压压缩包三、配置环境变量四、初始化元数据库4.1 配置MySQL地址4.2 拷贝MySQL驱动4.3 初始化元数据库4.3.1 创建数据库4.3.2 初始化元数据库 五、启动元数据服务metastore5.1 修改配置文件5.2 启动/关闭metastore服务 六、启动hiveserver2服务6.1…...

编程日记 2023/11/25 6:21:24

手把手教你安装 Visual Studio 2022 及其简单使用

软件下载 打开 Visual Studio 官网&#xff0c;个人选择免费的Community社区版就够用了。 软件安装 双击运行安装程序&#xff1a; 点击继续 即可&#xff1a; 等待加载完成&#xff1a; 可以看到 Visual Studio 2022 对应不同的开发需求提供了若干工作负载&#xff0c;这里以…...

编程日记 2023/11/25 6:20:23

在MySQL中，修改字段A相同的记录的字段B ，要使得字段C小的记录的字段B值等于字段C大的记录的字段B值

例如&#xff1a;更新具有相同电话号码的用户记录&#xff0c;使得updatetime小的记录的name值等于updatetime大的记录的name值。 首先&#xff0c;我们需要创建一个用户表&#xff0c;这个用户表包含以下字段&#xff1a;phone&#xff0c;updatetime, name。以下是创建这个表…...

编程日记 2023/11/25 6:19:23

Java WebSocket 客户端接收大量数据

介绍 WebSocket 是一种基于 TCP 协议的全双工通信协议&#xff0c;它能够在客户端和服务器之间建立一个持久连接&#xff0c;实现实时的双向数据传输。在实际应用中&#xff0c;有时候我们需要处理大量的数据&#xff0c;例如实时监控系统或者实时股票行情等。本文将介绍如何使…...

编程日记 2023/11/25 6:18:21

QT 在Windows下实现ping功能（ICMP）

前言 很多时候&#xff0c;我们可能会图省事直接调用系统中的ping命令&#xff0c;但这是很不科学的~ 废话不多说&#xff0c;直接上代码.. .pro文件 在.pro文件末尾添加一行&#xff1a; LIBS -liphlpapi -lws2_32 .h文件 在.h文件中加入&#xff1a; #include <Q…...

编程日记 2023/11/25 6:17:17

harmonyos应用开发者高级认证考试部分答案

1只要使用端云一体化的云端资源就需要支付费用&#xff08;错&#xff09; 2所有使用Component修饰的自定义组件都支持onPageShow&#xff0c;onBackPress和onPageHide生命周期函数。&#xff08;错&#xff09; 3 HarmonyOS应用可以兼容OpenHarmony生态&#xff08;对&#…...

编程日记 2023/11/25 6:16:16

基于 STM32Cube.AI 的嵌入式人脸识别算法实现

本文介绍了如何使用 STM32Cube.AI 工具开发嵌入式人脸识别算法。首先&#xff0c;我们将简要介绍 STM32Cube.AI 工具和 STM32F系列单片机的特点。接下来&#xff0c;我们将详细讨论如何使用 STM32Cube.AI 工具链和相关库来进行人脸识别算法的开发和优化。最后&#xff0c;我们提…...

编程日记 2023/11/25 6:14:11

ElasticSearch之cat allocation API

查看各节点上各个shard的硬件使用情况&#xff0c;命令样例如下&#xff1a; curl -X GET "https://localhost:9200/_cat/allocation?vtrue&pretty" --cacert $ES_HOME/config/certs/http_ca.crt -u "elastic:ohCxPHQBEs5*lo7F9"执行结果如下&#x…...

编程日记 2023/11/25 6:13:11

Vue + Element UI 实现复制当前行数据功能(复制到新增页面组件值不能更新等问题解决)

1、需求 使用Vue Element UI 实现在列表的操作栏新增一个复制按钮&#xff0c;复制当前行的数据可以打开新增弹窗后亦可以跳转到新增页面&#xff0c;本文实现为跳转到新增页面。 2、实现 1&#xff09;列表页 index.vue <el-table> <!-- 其他列 --> <el-t…...

编程日记 2023/11/25 6:12:09

嵌入式FPGA IP正在发现更广阔的用武之地

作者&#xff1a;郭道正, Achronix Semiconductor中国区总经理 在日前落幕的“中国集成电路设计业2023年会暨广州集成电路产业创新发展高峰论坛&#xff08;ICCAD 2023&#xff09;”上&#xff0c;Achronix的Speedcore™嵌入式FPGA硅知识产权&#xff08;eFPGA IP&#xff09…...

编程日记 2023/11/25 6:11:08

[点云分割] 条件欧氏聚类分割

介绍 条件欧氏聚类分割是一种基于欧氏距离和条件限制的点云分割方法。它通过计算点云中点与点之间的欧氏距离&#xff0c;并结合一定的条件限制来将点云分割成不同的区域或聚类。 在条件欧氏聚类分割中&#xff0c;通常会定义以下两个条件来判断两个点是否属于同一个聚类&…...

编程日记 2023/11/25 6:10:07

Spring事务粒度优化与传播机制

在Spring事务中&#xff0c;我们通常会为了控制事务粒度&#xff0c;会把它进行拆分&#xff0c;为了避免大事务执行太久&#xff0c;占用资源太多&#xff0c;导致资源利用率低的问题。 我们曾经就遇到老系统因为大事务&#xff0c;把服务打死了。 问题出在一个大事务中有一…...

编程日记 2023/11/25 6:09:06

MySQL 基于成本的优化

其实在MySQL中⼀条查询语句的执⾏成本是由下边这两个⽅⾯组成的&#xff1a; I/O成本 我们的表经常使⽤的MyISAM、InnoDB存储引擎都是将数据和索引都存储到磁盘上的&#xff0c;当我们想查询表中的记录时&#xff0c;需要先把数据或者索引加载到内存中 然后再操作。这个从磁盘…...

编程日记 2023/11/25 6:08:04

【maven】【IDEA】idea中使用maven编译项目，报错java: 错误: 找不到符号 【2】

idea中使用maven编译项目，报错java: 错误: 找不到符号 错误状况展示： 如果报这种错，是因为项目中真的找不到报错的方法或者枚举 字段之类的，但实际是 ： 点击 File Path...

编程日记 2023/11/25 6:07:03

AIGC，ChatGPT AI绘画 Midjourney 注册流程详细步骤

AI 绘画，Midjourney完成高清图片绘制，轻松掌握AI工具。 前期准备： ① 一个能使用的谷歌账号 ② 可以访问外网 Midjourney注册 1.进入midjourney官网https://www.midjourney.com 点击左下角”Join the Beta”，就可以注册，第一次使用的小伙伴会弹出提示，只需要点击Acc…...

编程日记 2023/11/25 6:06:03

万字解析设计模式之模板方法与解释器模式

一、模板方法模式 1.1概述 定义一个操作中算法的框架&#xff0c;而将一些步骤延迟到子类中&#xff0c;模板方法使得子类可以不改变一个算法的结构即可重定义该算法的某些特定步骤。 例如&#xff0c;去银行办理业务一般要经过以下4个流程&#xff1a;取号、排队、办理具体业…...

编程日记 2023/11/25 6:05:01

apipost接口200状态码，浏览器控制台500状态码

后端 url 登录login方法 login(){this.$refs.loginForm.validate(async valid > {if (!valid) return// 由于data属性是一个json对象&#xff0c;需要进行解构赋值{data:result}&#xff0c;进行状态码判断const {data: result} await this.$http.post(/api/doLogin,this.…...

编程日记 2023/11/25 6:04:00

Instant Web API .Net Core Crack

Instant Web API .Net Core 是立即构建即时数据库 Web API&#xff0c;无需编码。在几分钟内生成您的 Web API&#xff0c;以更快地构建应用程序。使用 VS 2022 和 Entity Framework Core 为任何 MS SQL 数据库生成 Web API。 新功能 - 使用 Visual Studio 2022 为 PostgreSQL …...

编程日记 2023/11/25 6:02:59

XML Group端口详解

在XML数据映射过程中&#xff0c;经常需要对数据进行分组聚合操作。例如&#xff0c;当处理包含多个物料明细的XML文件时&#xff0c;可能需要将相同物料号的明细归为一组&#xff0c;或对相同物料号的数量进行求和计算。传统实现方式通常需要编写脚本代码&#xff0c;增加了开…...

编程新知 2025/9/20 0:09:20

linux之kylin系统nginx的安装

一、nginx的作用 1.可做高性能的web服务器 直接处理静态资源&#xff08;HTML/CSS/图片等&#xff09;&#xff0c;响应速度远超传统服务器类似apache支持高并发连接 2.反向代理服务器 隐藏后端服务器IP地址&#xff0c;提高安全性 3.负载均衡服务器 支持多种策略分发流量…...

编程新知 2025/9/18 1:41:40

智慧工地云平台源码，基于微服务架构+Java+Spring Cloud +UniApp +MySql

智慧工地管理云平台系统&#xff0c;智慧工地全套源码&#xff0c;java版智慧工地源码&#xff0c;支持PC端、大屏端、移动端。 智慧工地聚焦建筑行业的市场需求&#xff0c;提供“平台网络终端”的整体解决方案&#xff0c;提供劳务管理、视频管理、智能监测、绿色施工、安全管…...

编程新知 2025/9/19 5:54:45

在HarmonyOS ArkTS ArkUI-X 5.0及以上版本中，手势开发全攻略：

在 HarmonyOS 应用开发中&#xff0c;手势交互是连接用户与设备的核心纽带。ArkTS 框架提供了丰富的手势处理能力&#xff0c;既支持点击、长按、拖拽等基础单一手势的精细控制&#xff0c;也能通过多种绑定策略解决父子组件的手势竞争问题。本文将结合官方开发文档&#xff0c…...

编程新知 2025/9/19 4:31:58

python爬虫：Newspaper3k 的详细使用（好用的新闻网站文章抓取和解析的Python库）

更多内容请见： 爬虫和逆向教程-专栏介绍和目录 文章目录 一、Newspaper3k 概述1.1 Newspaper3k 介绍1.2 主要功能1.3 典型应用场景1.4 安装二、基本用法2.2 提取单篇文章的内容2.2 处理多篇文档三、高级选项3.1 自定义配置3.2 分析文章情感四、实战案例4.1 构建新闻摘要聚合器…...

编程新知 2025/6/21 6:25:06

Spring Boot+Neo4j知识图谱实战：3步搭建智能关系网络！

一、引言 在数据驱动的背景下&#xff0c;知识图谱凭借其高效的信息组织能力&#xff0c;正逐步成为各行业应用的关键技术。本文聚焦 Spring Boot与Neo4j图数据库的技术结合&#xff0c;探讨知识图谱开发的实现细节&#xff0c;帮助读者掌握该技术栈在实际项目中的落地方法。 …...

编程新知 2025/9/17 21:39:04

【Post-process】【VBA】ETABS VBA FrameObj.GetNameList and write to EXCEL

ETABS API实战：导出框架元素数据到Excel 在结构工程师的日常工作中，经常需要从ETABS模型中提取框架元素信息进行后续分析。手动复制粘贴不仅耗时，还容易出错。今天我们来用简单的VBA代码实现自动化导出。 🎯 我们要实现什么？ 一键点击，就能将ETABS中所有框架元素的基…...

编程新知 2025/9/7 8:47:02

如何在Windows本机安装Python并确保与Python.NET兼容

✅作者简介&#xff1a;2022年博客新星 第八。热爱国学的Java后端开发者&#xff0c;修心和技术同步精进。 &#x1f34e;个人主页&#xff1a;Java Fans的博客 &#x1f34a;个人信条&#xff1a;不迁怒&#xff0c;不贰过。小知识&#xff0c;大智慧。 &#x1f49e;当前专栏…...

编程新知 2025/9/21 4:45:28

门静脉高压——表现

一、门静脉高压表现 00:01 1. 门静脉构成 00:13 组成结构&#xff1a;由肠系膜上静脉和脾静脉汇合构成&#xff0c;是肝脏血液供应的主要来源。淤血后果&#xff1a;门静脉淤血会同时导致脾静脉和肠系膜上静脉淤血&#xff0c;引发后续系列症状。 2. 脾大和脾功能亢进 00:46 …...

编程新知 2025/9/21 9:08:12

Linux操作系统共享Windows操作系统的文件

目录 一、共享文件 二、挂载 一、共享文件 点击虚拟机选项-设置 点击选项&#xff0c;设置文件夹共享为总是启用&#xff0c;点击添加&#xff0c;可添加需要共享的文件夹 查询是否共享成功 ls /mnt/hgfs 如果显示Download&#xff08;这是我共享的文件夹&#xff09;&…...

编程新知 2025/9/21 14:01:48