office這個(gè)體系分為四個(gè)大教程
????????1、【document server文檔服務(wù)器基礎(chǔ)搭建】
????????2、【連接器(connector)或者jsApi調(diào)用操作office】-進(jìn)階
????????3、【document builder文檔構(gòu)造器使用】-進(jìn)階文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-834890.html
????????4、【Conversion API(文檔轉(zhuǎn)化服務(wù))】-進(jìn)階文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-834890.html
?????????如果需要連接器，可以查看：onlyofficeV7.5.1 jsApi調(diào)用 進(jìn)階開(kāi)發(fā) 二次開(kāi)發(fā) 連接器(connector)開(kāi)發(fā) - 知乎 (zhihu.com)
1、onlyoffice軟件本身的部署
????????這里主要介紹docker版本，因?yàn)樵趯W(xué)習(xí)過(guò)程中發(fā)現(xiàn)，onlyoffice本身很大，最好還是獨(dú)立部署一臺(tái)服務(wù)器，避免和其他資源沖突，所以結(jié)合當(dāng)前的技術(shù)路線，docker是比較好的選擇。
2、拉取docker鏡像，并啟動(dòng)
????????2.1、首先我們拉取docker鏡像，推薦先用7.3.3進(jìn)行測(cè)試，從7.5之后啟動(dòng)需要帶有token標(biāo)識(shí)，太麻煩，圖例用的是windows下的docker desktop，linux下同理，可以使用docker的web界面管理工具進(jìn)行操作比如：macrozheng：吊炸天的 Docker 圖形化工具 Portainer，必須推薦給你！
?
圖1、拉取鏡像
????????2.2、等著鏡像拉取完成，我們來(lái)啟動(dòng)它，點(diǎn)擊右邊的啟動(dòng)按鈕
?
圖2、準(zhǔn)備啟動(dòng)
????????2.3、之后會(huì)打開(kāi)一個(gè)配置框，這里就看個(gè)人了，我習(xí)慣映射一個(gè)端口?！咀⒁狻?.3之后，最好加上JWT_ENABLED這個(gè)配置，不然會(huì)有問(wèn)題，畢竟官方開(kāi)始收費(fèi)了。
?
圖3、啟動(dòng)配置
????????2.4、接下來(lái)等著啟動(dòng)完成就可以了，日志大概是這樣的
?
圖4、啟動(dòng)日志圖例
------------------------------------以上為office軟件本身的部署-------------------------------
3、集成html或者vue
????????3.1、這里使用html原生最為直觀，vue也一樣，只是封裝了幾個(gè)方法。
????????3.2、onlyoffice編輯器需要如下幾個(gè)必須配置才可以正常使用
1、config配置
config的完整文檔：https://api.onlyoffice.com/editors/config/
我們下面使用【必要參數(shù)】的簡(jiǎn)化做講解
2、callback回調(diào)
回調(diào)的最要說(shuō)明，status：https://api.onlyoffice.com/editors/callback
回調(diào)是后端的實(shí)現(xiàn)，只有一個(gè)目的，接受office保存文件通知，然后你就可以拿到前端保存文件進(jìn)行操作
比如：上傳minio、保存到本地等等????????3.3、config樣例，這個(gè)樣例可以直接使用不用調(diào)整
var config = {
"documentType": "word",
"document": {
"title": "【經(jīng)營(yíng)】通用合同模板.docx",
"url": "https://d2nlctn12v279m.cloudfront.net/assets/docs/samples/zh/demo.docx",
// 當(dāng)前用戶對(duì)于當(dāng)前文檔的操作權(quán)限
"permissions": {
"print": false,
"download": true
},
"fileType": "docx",
onlyoffice用key做文件緩存索引，推薦每次都隨機(jī)生成一下，不然總是讀取緩存
"key": "e932e7bb1e4d449aa9a7d8ss517"
},
"editorConfig": {
// 編輯器常規(guī)配置
"customization": {
// 自動(dòng)保存可以關(guān)閉，常規(guī)ctrl+s更好用
"autosave": false,
"compactToolbar": true,
"forcesave": true,
"toolbarNoTabs": true,
"help": false,
"compactHeader": true,
"hideRightMenu": true,
},
"mode": "edit",
這個(gè)回調(diào)及其的重要
"callbackUrl": "https://www.onlyoffice.com/post.ashx?type=editor-callback",
// 菜單顯示語(yǔ)言
"lang": "zh-CN",
// 當(dāng)前操作用戶信息
"user": {
"name": "曹瑞劍雄",
"id": "103"
}
}
};????????【url】一定使用真實(shí)的IP或者域名，不要使用127.0.0.1或者localhost
????????因?yàn)閛ffice容器/服務(wù)器，不是你的localhost，它需要讀取你電腦上的文件，只能有真實(shí)IP/域名。
????????【callbackUrl】，開(kāi)放所有方法，不要指定只能用get或者post。
????????前期調(diào)試的時(shí)候，直接返回{"error":0}就可以，等調(diào)通后再考慮邏輯處理。
????????3.4、后端樣例，包含：status說(shuō)明和接收信息流實(shí)現(xiàn)
public enum OnlyOfficeCallBackStatus {
SUCCESS(0, "通用"),
EDIT(1, "正在編輯文檔"),
READY_TO_SAVE(2, "文檔已準(zhǔn)備好保存"),
SAVE_ERROR(3, "發(fā)生文檔保存錯(cuò)誤"),
CLOSE_NO_CHANGE(4, "文檔已關(guān)閉，沒(méi)有任何更改"),
SAVE(6, "保存"),
FORCE_SAVE_ERROR(7, "強(qiáng)制保存文檔時(shí)發(fā)生錯(cuò)誤"),
;
private final Integer code;
private final String message;
OnlyOfficeCallBackStatus(Integer code, String message) {
this.code = code;
this.message = message;
}
public boolean equals(Integer code) {
return this.code.equals(code);
}
}service實(shí)現(xiàn)，僅供參考，用什么語(yǔ)言都行。
/**
* 回調(diào)
*/
@Override
public String callback(HttpServletRequest request, HttpServletResponse response) throws IOException {
log.info("傳入的參數(shù)：" + request.getParameterMap());
String body = "";
try {
Scanner scanner = new Scanner(request.getInputStream());
scanner.useDelimiter("\\A");
body = scanner.hasNext() ? scanner.next() : "";
scanner.close();
} catch (Exception ex) {
return "";
}
if (body.isEmpty()) {
throw new IOException("ONLYOFFICE回調(diào)保存請(qǐng)求體未空");
}
JSONObject jsonObj = JSONUtil.parseObj(body);
log.info("body數(shù)據(jù)：" + jsonObj);
int status = jsonObj.getInt("status");
if (status == 2 || status == 3 || status == 6){
String serverFielUrl = jsonObj.getStr("url");
HttpResponse res = HttpRequest.get(serverFielUrl).execute();
InputStream in = res.bodyStream();
// 模板路徑
String fileName = cn.hutool.core.lang.UUID.randomUUID().toString().replace("-", "") + "_create." + jsonObj.getStr("filetype");
String templatePath = getClass().getClassLoader().getResource("").getPath();
templatePath += fileName;
log.info("文件保存地址：" + templatePath);
File tempFile = new File(templatePath);
try {
FileUtils.copyInputStreamToFile(in, tempFile);
} catch (IOException e) {
e.printStackTrace();
}
}
return "{\"error\":0}";
}4、前端的demo，可以直接運(yùn)行，我這邊搭建了體驗(yàn)服務(wù)器版本為：7.5.1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="http://47.94.91.67:10100/web-apps/apps/api/documents/api.js"></script>
<style>
body {
width: 100%;
height: 90vh;
display: flex;
flex-direction: column;
}
#placeholder {
width: 100%;
height: 100vh;
}
</style>
</head>
<body>
<div id="placeholder" class="nav" style="width: 100%; height: 100vh;"></div>
</body>
<script>
var onDocumentReady = function () {
console.log("文檔準(zhǔn)備好了");
};
var config = {
"documentType": "word",
"historyList": {
"history": [],
"currentVersion": "1"
},
"document": {
"title": "【經(jīng)營(yíng)】通用合同模板.docx",
"url": "https://d2nlctn12v279m.cloudfront.net/assets/docs/samples/zh/demo.docx",
"permissions": {
"print": false,
"download": true
},
"attachId": "e932e7bb1e4d449aa9a7d8b403b4b517",
"fileType": "docx",
"key": "e932e7bb1e4d449aa9a7d8ss517"
},
"editorConfig": {
"customization": {
"autosave": false,
"compactToolbar": true,
"forcesave": true,
"toolbarNoTabs": true,
"help": false,
"compactHeader": true,
"hideRightMenu": true,
},
"mode": "edit",
"callbackUrl": "https://www.onlyoffice.com/post.ashx?type=editor-callback",
"lang": "zh-CN",
"user": {
"name": "曹瑞劍雄",
"id": "103"
}
}
};
var docEditor;
initDocEditor();
/**
* 初始化編輯器
*/
function initDocEditor() {
// 初始化配置
config['events'] = {
onDocumentReady: onDocumentReady
};
docEditor = new DocsAPI.DocEditor("placeholder", config);
}
</script>
</html>整個(gè)代碼的核心就是：docEditor =newDocsAPI.DocEditor("placeholder", config);這句話， 包含兩個(gè)參數(shù)： 第一個(gè)參數(shù)是需要使用的渲染容器ID，比如div 第二個(gè)就是初始化編輯器所需要的配置信息
----------------------------------以上是先跑起來(lái)的步驟------------------------------------
5、onlyoffice基礎(chǔ)原理講解
????????5.1、office本身有：DOCUMENT SERVER（文檔服務(wù)器）、DOCUMENT BUILDER（文檔生成器）、 Conversion API（轉(zhuǎn)化API）
????????對(duì)于絕大部分公司的業(yè)務(wù)，目前只用到DOCUMENT SERVER（文檔服務(wù)器）就可以了，其他的進(jìn)階教程【后續(xù)補(bǔ)充】
1、DOCUMENT SERVER（文檔服務(wù)器） 用于web頁(yè)面編輯office文件，也就是最最基礎(chǔ)的功能。上面的實(shí)例就是DOCUMENT SERVER（文檔服務(wù)器） 2、DOCUMENT BUILDER（文檔生成器） ? 用于通過(guò)代碼生成或者操作office文件，比如后端常用的：poi等框架，onlyoffice本身也提供了這個(gè)功能【進(jìn)階】 3、Conversion API（轉(zhuǎn)化API） ? 部分公司業(yè)務(wù)上會(huì)需要對(duì)文件進(jìn)行轉(zhuǎn)化，onlyoffice也提供了這樣的功能，比如word->html、word->pdf等等【進(jìn)階】
5.2、DOCUMENT SERVER（文檔服務(wù)器）前后端如何進(jìn)行交互，這里借用一個(gè)圖
?
交互流程
簡(jiǎn)單來(lái)說(shuō)就是：前端操作->onlyoffice->你的后端callback 如果你有做過(guò)微信之類的回調(diào)就會(huì)比較清晰，office服務(wù)器作為中介，用于處理前端與后端的連通。 除此之外，再無(wú)其他。
6、結(jié)語(yǔ)
????????如果你看到了這里，發(fā)現(xiàn)想調(diào)用前端API操作word等等，那么你需要看進(jìn)階教程了。
比如：
????????jsAPi操作office文檔，官方叫做connector(鏈接器)
????????替代poi、easyExcel、phpExcel等后端操作office文檔等
????????有word、excel、pdf、html等相互轉(zhuǎn)化需求的
7、進(jìn)階教程正在編寫(xiě)，包含上面所關(guān)心的內(nèi)容
????????2、【連接器(connector)或者jsApi調(diào)用操作office】-進(jìn)階
????????3、【document builder文檔構(gòu)造器使用】-進(jìn)階
????????4、【Conversion API(文檔轉(zhuǎn)化服務(wù))】-進(jìn)階
到了這里，關(guān)于onlyoffice基礎(chǔ)環(huán)境搭建+部署+demo可直接運(yùn)行 最簡(jiǎn)單的入門的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
