一、onlyoffice是什么

ONLYOFFICE 是一個(gè)開(kāi)源的辦公套件，適合多人在線協(xié)作。由總部位于總部在拉脫維亞的 IT 公司Acensio System SIA 開(kāi)發(fā)。它提供在線協(xié)作文檔編輯器（包括文檔、電子表格、演示文稿和表單），適用于 Windows、Linux、macOS、Android 和 iOS 系統(tǒng)。也可以將 ONLYOFFICE 集成到學(xué)習(xí)管理平臺(tái)、同步與共享平臺(tái)、企業(yè)管理系統(tǒng)等，甚至集成到你自己的應(yīng)用程序中。ONLYOFFICE同微軟office、金山WPS的功能相似，可以看成是同一類軟件產(chǎn)品，但ONLYOFFICE的源代碼是開(kāi)源的。另外，表單Forms是ONLYOFFICE 的一大特色功能，能直接在編輯器內(nèi)創(chuàng)建表單，可以實(shí)現(xiàn)類似于web表單功能和精細(xì)化權(quán)限控制。

ONLYOFFICE比MS OFFICE、WPS更強(qiáng)大的功能就是插件機(jī)制，支持安裝豐富的插件，比如OCR、ChatGPT、自動(dòng)翻譯、視頻通話、文本轉(zhuǎn)換、生成參考文獻(xiàn)、拼寫(xiě)檢查等，大部分插件都免費(fèi)使用的，可以在線安裝。

ONLYOFFICE支持集成ChatGPT插件。ChatGPT是由人工智能研究實(shí)驗(yàn)室OpenAI在2022年11月30日發(fā)布的全新聊天機(jī)器人模型，一款技術(shù)驅(qū)動(dòng)的自然語(yǔ)言處理工具。它能夠通過(guò)學(xué)習(xí)和理解人類的語(yǔ)言來(lái)進(jìn)行對(duì)話，還能根據(jù)聊天的上下文進(jìn)行互動(dòng)，真正像人類一樣來(lái)聊天交流，甚至能完成撰寫(xiě)郵件、視頻腳本、文案、翻譯、代碼等任務(wù)。在插件管理器中，找到 ChatGPT 并點(diǎn)擊安裝。

展開(kāi)全文

運(yùn)行ChatGPT,輸入對(duì)應(yīng)的密鑰（需要通過(guò)科學(xué)上網(wǎng)，在OpenAI官網(wǎng)?(opens new window)中獲取API Key，目前國(guó)內(nèi)用戶無(wú)法注冊(cè)獲取。 ），然后就在可以在onlyoffice中使用ChatGPT了。

ONLYOFFICE的插件機(jī)制為開(kāi)發(fā)者提供了極大靈活性，開(kāi)發(fā)者可以通過(guò)底層API接口自定義插件實(shí)現(xiàn)業(yè)務(wù)上復(fù)雜需求，比如：協(xié)同辦公OA項(xiàng)目收發(fā)文的正文創(chuàng)建、編輯和下載；合同管理項(xiàng)目中合同協(xié)議的自動(dòng)生成等。云程低代碼開(kāi)發(fā)平臺(tái)（http://www.yunchengxc.com）對(duì)開(kāi)源版ONLYOFFICE進(jìn)行了集成整合，可以表單和流程中直接使用office文檔控件，并可配置文檔模版路徑，表單字段值自動(dòng)帶入，控制文檔是否可編輯，文檔是否只讀，是否加載水印，是否可以打印，是否可以另存下載，是否需要留痕，是否顯示留痕等權(quán)限。

二、項(xiàng)目如何集成onlyoffice

在springboot+vue項(xiàng)目中集成開(kāi)源版onlyoffice組件，如果是私有化部署的項(xiàng)目，首先需要部署onlyoffice后端服務(wù)，然后使用onlyoffice的前端API進(jìn)行web集成調(diào)用。

1、安裝onlyoffice后端服務(wù)

onlyoffice后端服務(wù)安裝依賴RabbitMQ、Redis、PostgreSQL這些服務(wù)，支持在windows、Linux下安裝，也支持docker安裝。安裝方法這里不再展開(kāi)描述，詳細(xì)請(qǐng)參考官方安裝文檔：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前端調(diào)用示例如下：

!DOCTYPE htmlhtml

head

meta charset="UTF-8"

titleONLYOFFICE使用方法/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 語(yǔ)言的組件，可以在您的項(xiàng)目中從 npm 安裝 ONLYOFFICE 文檔相關(guān)組件

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

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

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

3、onlyoffice關(guān)鍵功能的API接口

業(yè)務(wù)系統(tǒng)中集成onlyoffice，常常涉及到的功能有：模版路徑配置，表單字段自動(dòng)帶值，文檔是否可編輯，文檔是否只讀，是否加載水印，是否可以打印，是否可以另存下載，是否需要留痕，是否顯示留痕等權(quán)限，onlyoffice分別提供了相關(guān)的API接口。

請(qǐng)參考官方文檔：https://api.onlyoffice.com

4、自定義插件實(shí)現(xiàn)表單字段自動(dòng)帶值

在OA電子公文、合同管理等業(yè)務(wù)系統(tǒng)中，常常需要把web表單字段的值自動(dòng)帶入到word文檔中，比如：合同編號(hào)、合同標(biāo)題等字段，如果使用微軟office，可以使用窗體域結(jié)合vba編程，實(shí)現(xiàn)字段值自動(dòng)同步。Onlyoffice 提供了強(qiáng)大的插件機(jī)制，可以自定義插件插件實(shí)現(xiàn)表單字段值自動(dòng)帶入功能。

我們先來(lái)看下onlyoffice插件目錄結(jié)構(gòu)：

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

├── icon.png # 插件圖標(biāo)

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

├── interface.js # 插件功能實(shí)現(xiàn)

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

└── translations # 國(guó)際化配置

└── zh-CN.json

插件結(jié)構(gòu)非常簡(jiǎn)單，里面主要是 config.json、index.html、plugins.js 和 interface.js。需要保證config.json、index.html、interface.js、plugins.js這四個(gè)文件在同一個(gè)文件夾當(dāng)中, 然后將文件夾放入到容器內(nèi)的/var/www/onlyoffice/documentserver/sdkjs-plugins目錄下, 重啟即可。

# config.json參數(shù)說(shuō)明

{

"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的作用主要是用來(lái)加載js

- EditorsSupport：聲明該插件在word、excel、ppt可用

- isSystem：設(shè)置該值為true后在菜單欄中不顯示該插件, 后臺(tái)自動(dòng)運(yùn)行該插件

- events：聲明事件

其他參數(shù)請(qǐng)看官方文檔：https://api.onlyoffice.com/plugin/config

plugins.js一般在onlyoffice容器內(nèi)的/var/www/onlyoffice/documentserver/sdkjs-plugins/v1目錄下, 可以直接從里邊拿過(guò)來(lái)復(fù)用。

interface.js就是插件功能的邏輯了，以下是interface.js代碼，主要實(shí)現(xiàn)了表單字段自動(dòng)帶值功能。

(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']){

// 該事件監(jiān)聽(tīng)似乎在7.x版本后就失效了 我還沒(méi)嘗試過(guò)

window.parent.Common.Gateway.on('internalcommand', function(args) {

// 如果需要自定義插件的功能, 只需要在這個(gè)方法里接受參數(shù)寫(xiě)邏輯就行

var data = args.data;

var command = args.command;

//設(shè)置表單字段值

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不支持批量的操作, 只能單個(gè)插入, 這里需要一個(gè)定時(shí)器才能做到批量的插入, 否則會(huì)報(bào)錯(cuò)或者什么都不插入

setTimeout(function() {

executeMethod(command, [arg]);

}, 100 * index);

});

}

});

window['boundInternalcommand'] = true;

}

// 在插件彈出窗外釋放鼠標(biāo)時(shí)觸發(fā)

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) {

// 關(guān)閉插件彈出窗觸發(fā)

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：根據(jù)標(biāo)簽獲取表單控件

SetFormValue：設(shè)置表單控件值

插件調(diào)用：

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

最后實(shí)現(xiàn)的效果如下：