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

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

news 2026/2/10 17:29:14

一、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

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

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

编程新知 2026/1/30 15:16:32

学习STC51单片机31（芯片为STC89C52RCRC）OLED显示屏1

每日一言 生活的美好&#xff0c;总是藏在那些你咬牙坚持的日子里。 硬件&#xff1a;OLED 以后要用到OLED的时候找到这个文件 OLED的设备地址 SSD1306"SSD" 是品牌缩写&#xff0c;"1306" 是产品编号。 驱动 OLED 屏幕的 IIC 总线数据传输格式 示意图 …...

编程新知 2026/1/30 4:16:26

css的定位（position）详解：相对定位 绝对定位 固定定位

在 CSS 中&#xff0c;元素的定位通过 position 属性控制&#xff0c;共有 5 种定位模式&#xff1a;static&#xff08;静态定位&#xff09;、relative&#xff08;相对定位&#xff09;、absolute&#xff08;绝对定位&#xff09;、fixed&#xff08;固定定位&#xff09;和…...

编程新知 2026/2/6 6:35:29

（转）什么是DockerCompose?它有什么作用？

一、什么是DockerCompose? DockerCompose可以基于Compose文件帮我们快速的部署分布式应用&#xff0c;而无需手动一个个创建和运行容器。 Compose文件是一个文本文件&#xff0c;通过指令定义集群中的每个容器如何运行。 DockerCompose就是把DockerFile转换成指令去运行。 …...

编程新知 2026/1/31 22:59:12

蓝桥杯 冶炼金属

原题目链接 &#x1f527; 冶炼金属转换率推测题解 &#x1f4dc; 原题描述 小蓝有一个神奇的炉子用于将普通金属 O O O 冶炼成为一种特殊金属 X X X。这个炉子有一个属性叫转换率 V V V&#xff0c;是一个正整数&#xff0c;表示每 V V V 个普通金属 O O O 可以冶炼出 …...

编程新知 2026/2/4 10:54:26

LINUX 69 FTP 客服管理系统 man 5 /etc/vsftpd/vsftpd.conf

FTP 客服管理系统 实现kefu123登录&#xff0c;不允许匿名访问&#xff0c;kefu只能访问/data/kefu目录&#xff0c;不能查看其他目录 创建账号密码 useradd kefu echo 123|passwd -stdin kefu [rootcode caozx26420]# echo 123|passwd --stdin kefu 更改用户 kefu 的密码…...

编程新知 2026/2/9 20:16:17

A2A JS SDK 完整教程：快速入门指南

目录 什么是 A2A JS SDK?A2A JS 安装与设置A2A JS 核心概念创建你的第一个 A2A JS 代理A2A JS 服务端开发A2A JS 客户端使用A2A JS 高级特性A2A JS 最佳实践A2A JS 故障排除 什么是 A2A JS SDK? A2A JS SDK 是一个专为 JavaScript/TypeScript 开发者设计的强大库&#xff…...

编程新知 2025/12/12 8:42:24

虚拟电厂发展三大趋势：市场化、技术主导、车网互联

市场化&#xff1a;从政策驱动到多元盈利 政策全面赋能 2025年4月&#xff0c;国家发改委、能源局发布《关于加快推进虚拟电厂发展的指导意见》&#xff0c;首次明确虚拟电厂为“独立市场主体”&#xff0c;提出硬性目标&#xff1a;2027年全国调节能力≥2000万千瓦&#xff0…...

编程新知 2025/12/20 18:09:59

Web中间件--tomcat学习

Web中间件–tomcat Java虚拟机详解 什么是JAVA虚拟机 Java虚拟机是一个抽象的计算机&#xff0c;它可以执行Java字节码。Java虚拟机是Java平台的一部分&#xff0c;Java平台由Java语言、Java API和Java虚拟机组成。Java虚拟机的主要作用是将Java字节码转换为机器代码&#x…...

编程新知 2025/9/13 18:20:34

Python竞赛环境搭建全攻略

Python环境搭建竞赛技术文章大纲 竞赛背景与意义 竞赛的目的与价值Python在竞赛中的应用场景环境搭建对竞赛效率的影响 竞赛环境需求分析 常见竞赛类型&#xff08;算法、数据分析、机器学习等&#xff09;不同竞赛对Python版本及库的要求硬件与操作系统的兼容性问题 Pyth…...

编程新知 2025/9/5 19:04:58