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.hqwc.cn/news/213400.html

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

相关文章

国标直流充电枪9孔分别啥意思？

国标直流充电枪9孔分别啥意思？

DC&#xff1a;直流电源正 DC-&#xff1a;直流电源负 PE&#xff1a;接地&#xff08;搭铁&#xff09;S&#xff1a;通讯CAN-H S-&#xff1a;通讯CAN-L CC1&#xff1a;充电连接确认 CC2&#xff1a;充电连接确认 A&#xff1a;12V A-&#xff1a;12V- 以上就是国标直流充电…
阅读更多...
synchronized的轻量级锁居然不会自旋？

synchronized的轻量级锁居然不会自旋？

《Java并发编程的艺术》中说到「如果失败&#xff0c;表示其他线程竞争锁&#xff0c;当前线程便尝试使用自旋来获取锁」&#xff0c;并且下文所配的流程图中明确表示自旋失败后才会升级为重量级锁&#xff0c;但《深入理解Java虚拟机》又说「如果出现两条以上的线程争用同一个…
阅读更多...
西米支付：如何设计和构建游戏支付系统？

西米支付：如何设计和构建游戏支付系统？

如何设计和构建游戏支付系统&#xff1f; 目前&#xff0c;游戏开发中最常见的支付方式包括微信支付、支付宝支付和苹果支付等。今天&#xff0c;我将与大家分享游戏支付系统的架构和设计。 游戏支付的主要业务流程是指游戏玩家在游戏中购买虚拟物品或服务所进行的支付过程。一…
阅读更多...
【SpringCloud】为什么选择微服务？

【SpringCloud】为什么选择微服务？

一般的平台会遇到的问题&#xff1a; 服务配置复杂。基础服务多&#xff0c;服务的资源配置复杂&#xff0c;传统方式管理服务复杂 服务之间调用复杂。检索服务、用户中心服务等&#xff0c;服务之间的调用复杂&#xff0c;依赖多 服务监控难度大。服务比较多&#xff0c;…
阅读更多...
基于51单片机车载空调系统设计proteus仿真+源程序）

基于51单片机车载空调系统设计proteus仿真+源程序）

一、系统方案 1、本设计采用这51单片机作为主控器。 2、DS18B20采集温度值送到液晶1602显示。 3、按键设置报警值。 4、温度控制风扇档位。 二、硬件设计 原理图如下&#xff1a; 三、单片机软件设计 1、首先是系统初始化 /T0初始化*/ void init_t0() { //TMOD0x01;//定时器…
阅读更多...
springboot 毕业生去向统计设计系统-计算机毕设 附源码 25559

springboot 毕业生去向统计设计系统-计算机毕设 附源码 25559

springboot 毕业生去向统计设计系统 摘 要 信息化社会内需要与之针对性的信息获取途径&#xff0c;但是途径的扩展基本上为人们所努力的方向&#xff0c;由于角度存在偏差&#xff0c;人们经常能够获取不同类型的信息&#xff0c;这也是技术最为难以攻克的课题。针对毕业生去向…
阅读更多...
SpringCloud 微服务全栈体系（十七）

SpringCloud 微服务全栈体系（十七）

第十一章 分布式搜索引擎 elasticsearch 七、搜索结果处理 搜索的结果可以按照用户指定的方式去处理或展示。 1. 排序 elasticsearch 默认是根据相关度算分&#xff08;_score&#xff09;来排序&#xff0c;但是也支持自定义方式对搜索结果排序。可以排序字段类型有&#…
阅读更多...
Microsoft Office 2019下载工具

Microsoft Office 2019下载工具

今天博主继续推出重磅福利——Microsoft Office合集的安装工具。 Microsoft Office是一套由微软公司开发的办公软件&#xff0c;它为 Microsoft Windows 和 Mac OS X而开发。与办公室应用程序一样&#xff0c;它包括联合的服务器和基于互联网的服务。最近版本的 Office 被称为 …
阅读更多...
京东数据分析（京东大数据）：2023年10月京东手机行业品牌销售排行榜

京东数据分析（京东大数据）：2023年10月京东手机行业品牌销售排行榜

鲸参谋监测的京东平台10月份手机市场销售数据已出炉&#xff01; 根据鲸参谋平台的数据显示&#xff0c;今年10月份&#xff0c;京东平台手机行业的销量约340万&#xff0c;环比增长约11%&#xff0c;同比则下滑约2%&#xff1b;销售额为108亿&#xff0c;环比增长约17%&#x…
阅读更多...
嵌入式开发从入门到入土

嵌入式开发从入门到入土

写在前面的话 嵌入式开发涉及的层面很广&#xff0c;它既有底层硬件的开发&#xff0c;又涉及上层应用的开发&#xff0c;也就是所谓的系统集成的硬件和软件。而C语言不仅具有汇编语言操作底层的优势&#xff0c;又具有高级开发语言的功能性强的特点&#xff0c;当之无愧地成为…
阅读更多...
zerotier + rclone 异地同步minio文件

zerotier + rclone 异地同步minio文件

zerotier rclone 异地同步minio文件 场景说明解决方案部署zerotier私有化服务docker部署zerotierzerotier客户端下载加入虚拟网络web控制台设置测试网络连通性 使用rclone同步minio数据解压后文件结构使用cmd配置rclone本地minio配置远程minio配置 查看配置 同步文件 场景说明…
阅读更多...
销售为什么会选择使用电销这种方式 ？

销售为什么会选择使用电销这种方式 ？

在网络经济时代的大环境下&#xff0c;网络营销作为一种新型营销模式和营销理念&#xff0c;已经抢占了大部分市场。 网络营销&#xff0c;是指利用互联网技术和现代信息技术&#xff0c;以及社交媒体平台&#xff0c;进行产品宣传、销售、服务、品牌传播等活动的一种营销模式。…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023