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

一、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]);

最后实现的效果如下：

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

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

相关文章

Python with提前退出：坑与解决方案

Python with提前退出：坑与解决方案

Python with提前退出&#xff1a;坑与解决方案 问题的起源 早些时候使用with实现了一版全局进程锁&#xff0c;希望实现以下效果&#xff1a; Python with提前退出&#xff1a;坑与解决方案 全局进程锁本身不用多说&#xff0c;大部分都依靠外部的缓存来实现的&#xff0c;r…
阅读更多...
进阶C语言-字符函数和字符串函数

进阶C语言-字符函数和字符串函数

字符函数和字符串函数 &#x1f388;1.函数介绍&#x1f50e;1.1strlen函数&#x1f52d;1.1.1strlen函数的模拟实现&#x1f4d6;1.计数器法&#x1f4d6;2.递归法&#x1f4d6;3.指针-指针 &#x1f50e;1.2strcpy函数&#x1f52d;1.2.1strcpy函数的模拟实现 &#x1f50e;1…
阅读更多...
【机器学习】算法性能评估常用指标总结

【机器学习】算法性能评估常用指标总结

考虑一个二分问题&#xff0c;即将实例分成正类&#xff08;positive&#xff09;或负类&#xff08;negative&#xff09;。对一个二分问题来说&#xff0c;会出现四种情况。如果一个实例是正类并且也被 预测成正类&#xff0c;即为真正类&#xff08;True positive&#xff0…
阅读更多...
1.前端--基本概念【2023.11.25】

1.前端--基本概念【2023.11.25】

1.网站与网页 网站是网页集合。 网页是网站中的一“页”&#xff0c;通常是 HTML 格式的文件&#xff0c;它要通过浏览器来阅读。 2.Web的构成 主要包括结构&#xff08;Structure&#xff09; 、表现&#xff08;Presentation&#xff09;和行为&#xff08;Behavior&#xff…
阅读更多...
【深度学习】DAMO-YOLO，阿里，701类通用检测模型，目标检测

【深度学习】DAMO-YOLO，阿里，701类通用检测模型，目标检测

https://github.com/tinyvision/DAMO-YOLO/blob/master/README_cn.md DAMO-YOLO是由阿里巴巴达摩院智能计算实验室TinyML团队开发的一个兼顾速度与精度的目标检测框架,其效果超越了目前的一众YOLO系列方法&#xff0c;在实现SOTA的同时&#xff0c;保持了很高的推理速度。DAMO…
阅读更多...
虚幻学习笔记4—文本内容处理

虚幻学习笔记4—文本内容处理

一、前言 本文使用的虚幻引擎5.3.2&#xff0c;在虚幻中已经集成了很多可以直接处理多样化文本的蓝图&#xff0c;比如格式化动态显示、浮点数多样化等。 二、实现 2.1、格式化文本显示动态内容&#xff1a;在设置某个文本时可以使用“Format Text”蓝图设置自定义可以的显示…
阅读更多...
继承中的析构函数的权限的深入了解

继承中的析构函数的权限的深入了解

如果一个父类中的析构函数如果设置为 private 权限 &#xff0c;一个子类public继承了这个父类&#xff0c;那么 这个父类可以创建对象吗&#xff1f; 答案是 不可以 看看下面的代码 class A { public:private:~A() {} };class B :public A {A a; // 这个地方编译不报错&…
阅读更多...
数据结构——带头循环双向链表（List）

数据结构——带头循环双向链表（List）

1、带头双向循环链表介绍 在上一篇博客中我们提到了链表有三个特性&#xff0c;可以组合成为8种不同类型的链表。单链表是其中比较重要的一种&#xff0c;那么这次我们选择和带头双向循环链表会会面&#xff0c;这样我们就见识过了所有三种特性的呈现。 带头双向循环链表&#…
阅读更多...
基于C#实现优先队列

基于C#实现优先队列

一、堆结构 1.1性质 堆是一种很松散的序结构树&#xff0c;只保存了父节点和孩子节点的大小关系&#xff0c;并不规定左右孩子的大小&#xff0c;不像排序树那样严格&#xff0c;又因为堆是一种完全二叉树&#xff0c;设节点为 i,则 i/2 是 i 的父节点&#xff0c;2i 是 i 的…
阅读更多...
Pytorch 基于 deeplabv3_resnet50 迁移训练自己的图像语义分割模型

Pytorch 基于 deeplabv3_resnet50 迁移训练自己的图像语义分割模型

一、图像语义分割 图像语义分割是计算机视觉领域的一项重要任务&#xff0c;旨在将图像中的每个像素分配到其所属的语义类别&#xff0c;从而实现对图像内容的细粒度理解。与目标检测不同&#xff0c;图像语义分割要求对图像中的每个像素进行分类&#xff0c;而不仅仅是确定物…
阅读更多...
图形数据库的实战应用：如何在 Neo4j 中有效管理复杂关系

图形数据库的实战应用：如何在 Neo4j 中有效管理复杂关系

关系数据库管理系统( RDBMS ) 代表了最先进的技术&#xff0c;这在一定程度上要归功于其由周边技术、工具和广泛的专业技能组成的完善的生态系统。 在这个涵盖信息技术(IT) 和运营技术(OT) 的技术革命时代&#xff0c;人们普遍认识到性能方面出现了重大挑战&#xff0c;特别是…
阅读更多...
【广州华锐互动】Web3D云展编辑器能为展览行业带来哪些便利？

【广州华锐互动】Web3D云展编辑器能为展览行业带来哪些便利？

在数字时代中&#xff0c;传统的展览方式正在被全新的技术和工具所颠覆。其中&#xff0c;最具有革新意义的就是Web3D云展编辑器。这种编辑器以其强大的功能和灵活的应用&#xff0c;正在为展览设计带来革命性的变化。 广州华锐互动开发的Web3D云展编辑器是一种专门用于创建、编…
阅读更多...
关于网站的favicon.ico图标的设置需要注意的几点

关于网站的favicon.ico图标的设置需要注意的几点

01-必须在网页的head标签中放上对icon图标的说明语句&#xff1a; 比如下面这样的语句&#xff1a; <link rel"shortcut icon" href"/favicon.ico">否则&#xff0c;浏览器虽然能读到图标&#xff0c;但是不会把图标显示在标签上。 02-为了和本地开…
阅读更多...
DHCP、ARP、FTP、DNS、VRRP、STP、报文交互流程

DHCP、ARP、FTP、DNS、VRRP、STP、报文交互流程

目录 一、DHCP 1、DHCP终结 1、DHCP discover 2、DHCP offer 3、DHCP request 4、DHCP ack 5、DHCP request 6、DHCP 续租 2、DHCP终结 二、ARP 1、ARP类型 动态ARP 静态ARP ARP代理 ARP代理的分类&#xff1a;路由式代理、VLAN内的ARP代理、VLAN间的ARP代理。 6…
阅读更多...
【Hadoop】分布式文件系统 HDFS

【Hadoop】分布式文件系统 HDFS

目录 一、介绍二、HDFS设计原理2.1 HDFS 架构2.2 数据复制复制的实现原理 三、HDFS的特点四、图解HDFS存储原理1. 写过程2. 读过程3. HDFS故障类型和其检测方法故障类型和其检测方法读写故障的处理DataNode 故障处理副本布局策略 一、介绍 HDFS &#xff08;Hadoop Distribute…
阅读更多...
electron调用dll问题总汇

electron调用dll问题总汇

通过一天的调试安装&#xff0c;electron调用dll成功&#xff0c;先列出当前的环境&#xff1a;node版本: 18.12.0&#xff0c;32位的&#xff08;因为dll为32位的&#xff09; VS2019 python node-gyp 1、首先要查看报错原因&#xff0c;通常在某一行会有提示&#xff0c;常…
阅读更多...
C#常见的设计模式-行为型模式

C#常见的设计模式-行为型模式

前言 行为型模式是面向对象设计中的一类设计模式&#xff0c;它关注对象之间的通信和相互作用&#xff0c;以实现特定的行为或功能。在C#中&#xff0c;有许多常见的行为型模式&#xff0c;下面将对其中10种行为型模式进行介绍&#xff0c;并给出相应的代码示例。 目录 前言1.…
阅读更多...
什么是网络爬虫技术？它的重要用途有哪些？

什么是网络爬虫技术？它的重要用途有哪些？

网络爬虫&#xff08;Web Crawler&#xff09;是一种自动化的网页浏览程序&#xff0c;能够根据一定的规则和算法&#xff0c;从互联网上抓取和收集数据。网络爬虫技术是随着互联网的发展而逐渐成熟的一种技术&#xff0c;它在搜索引擎、数据挖掘、信息处理等领域发挥着越来越重…
阅读更多...
线性分组码的奇偶校验矩阵均匀性分析

线性分组码的奇偶校验矩阵均匀性分析

回顾信道编解码知识&#xff0c;我们知道信道编码要求编码具有检纠错能力&#xff0c;作为FEC&#xff08;forward error correction&#xff09;前向纠错编码的一类&#xff0c;线性分组码表示校验位与信息位的关系能够线性表示。 在这篇文章中&#xff0c;并不是要讨论信道编…
阅读更多...
【古月居《ros入门21讲》学习笔记】09_订阅者Subscriber的编程实现

【古月居《ros入门21讲》学习笔记】09_订阅者Subscriber的编程实现

目录 说明&#xff1a; 1. 话题模型 图示 说明 2. 实现过程&#xff08;C&#xff09; 创建订阅者代码&#xff08;C&#xff09; 配置发布者代码编译规则 编译并运行 编译 运行 3. 实现过程&#xff08;Python&#xff09; 创建订阅者代码&#xff08;Python&…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023