網(wǎng)頁qq家園seo排名賺錢
安裝Onlyoffice
拉取onlyoffice鏡像?
docker pull onlyoffice/documentserver
查看鏡像是否下載完成
docker images
啟動onlyoffice
以下是將本機(jī)的9001端口映射到docker的80端口上,訪問時通過服務(wù)器ip:9001訪問,并且用?-v?將本機(jī)機(jī)==/data/aws_s3/file-storage==文件夾掛載到docker的?/var/www/onlyoffice/documentserver/web-apps/wsData文件下,后續(xù)直接通過http請求讀取對應(yīng)的文件夾
docker run -i -t -d -p 9001:80 -v /data/aws_s3/file-storage:/var/www/onlyoffice/documentserver/web-apps/wsData onlyoffice/documentserver
打開瀏覽器輸入ip:9001
出現(xiàn)以下頁面就安裝成功
進(jìn)入容器修改配置:
docker exec -it 容器ID bash
?
示例應(yīng)用
一、了解onlyoffice
ONLYOFFICE Docs是一個開源辦公套件,包括文本文檔、電子表格和演示文稿的編輯器。它提供以下功能:
1、創(chuàng)建、編輯和查看文本文檔、電子表格和演示文稿;
2、與其他隊友實時協(xié)作處理文件;
3、ONLYOFFICE Docs 還支持用于將您的應(yīng)用程序與在線辦公室集成的WOPI 協(xié)議。
二、前提準(zhǔn)備
搭建安裝onlyoffice,具體參考官網(wǎng)地址:
https://helpcenter.onlyoffice.com/installation/docs-developer-install-ubuntu.aspx?from=api_csharp_example
三、開發(fā)進(jìn)行中
1、準(zhǔn)備一個接口返回config配置文件。
@GetMapping("/config/{fileId}")
@ApiOperation("返回配置信息")
public String getConfig(ModelMap map,@PathVariable String fileId){//具體業(yè)務(wù)處理省略//主要是獲取一些信息,用于設(shè)置html中的腳本對象config上。//4、設(shè)置視圖數(shù)據(jù):a、文件類型。b、用戶信息。c、文件信息。map.addAttribute("docType",documentType);map.addAttribute("user",user);map.addAttribute("fileManager",fileManager); //將html頁面返回回去return "onlineEdit";
}
2、準(zhǔn)備一個callback接口用于文件保存。
@PostMapping("/saveFile/{fileId}/{fileCode}")
@ApiOperation("在線編輯保存回調(diào)接口")
@ResponseBody
public void saveFile(HttpServletRequest request , HttpServletResponse response, @PathVariable String fileId, @PathVariable String fileCode) throws IOException {PrintWriter writer = response.getWriter();Scanner scanner = new Scanner(request.getInputStream()).useDelimiter("\\A");String body = scanner.hasNext() ? scanner.next() : "";JSONObject jsonObject = JSONObject.parseObject(body);System.out.println(jsonObject);//status等于2時表示已經(jīng)準(zhǔn)備好保存if((Integer) jsonObject.get("status") == 2){//2、根據(jù)返回的Url去下載文件URL url = new URL((String) jsonObject.get("url"));java.net.HttpURLConnection connection = (java.net.HttpURLConnection) url.openConnection();InputStream stream = connection.getInputStream();//此處獲取到的流即是onlyoffice服務(wù)下的文件流。//3、重新上傳業(yè)務(wù)省略connection.disconnect();}writer.write("{\"error\":0}");}
3、準(zhǔn)備一個html頁面。
<!DOCTYPE html>
<html lang="en" style="height: 100%;">
<head><meta charset="UTF-8"><script type="text/javascript" src="https://192.168.53.151:9000/web-apps/apps/api/documents/api.js"></script><script type="text/javascript" language="javascript" >var config = {"type": "desktop","mode": "review","documentType": "[[${docType}]]","document": {"title": "[[${fileManager.fileName}]]","url": "文件下載地址","fileType": "[[${fileManager.fileType}]]","key": "[[${fileManager.fileManagerId}]]","info": {},"permissions": {"comment": true,"copy": true,"download": true,"edit": true,"print": true,"fillForms": true,"modifyFilter": true,"modifyContentControl": true,"review": true,"commentGroups": {}}},"editorConfig": {"mode": "edit","callbackUrl": 回調(diào)接口保存文件的地址,"lang": "zh","createUrl": "","templates": [{"icon": "","name": "Blank","url": "http://ip地址/OnlineEditorsExampleJava_war_exploded/EditorServlet?fileExt=docx"},{"icon": "http://ip地址/OnlineEditorsExampleJava_war_exploded/css/img/file_docx.svg","name": "With sample content","url": "http://ip地址/OnlineEditorsExampleJava_war_exploded/EditorServlet?fileExt=docx&sample=true"}],"user": {"id": "[[${user.userId}]]","name": "[[${user.username}]]"},"customization": {"goback": {"url": "http://ip地址/OnlineEditorsExampleJava_war_exploded/IndexServlet"},"forcesave": false,"submitForm": false,"about": true,"feedback": false},"canCoAuthoring": true,"canUseHistory": true,"canHistoryClose": true,"canHistoryRestore": false,"canSendEmailAddresses": false,"canRequestEditRights": true,"canRequestClose": false,"canRename": false,"canMakeActionLink": true,"canRequestUsers": true,"canRequestSendNotify": true,"canRequestSaveAs": false,"canRequestInsertImage": true,"canRequestMailMergeRecipients": true},"width": "100%","height": "100%","events": {},"frameEditorId": "iframeEditor"}var connectEditor = function () {new DocsAPI.DocEditor("placeholder", config);};if (window.addEventListener) {window.addEventListener("load", connectEditor);} else if (window.attachEvent) {window.attachEvent("load", connectEditor);}</script><title>在線編輯文檔</title>
</head>
<body style="height: 100%; margin: 0;">
<div id="placeholder" style="height: 100%"></div>
</body>
</html>
更加具體的config對象和回調(diào)處理接口內(nèi)容參考官網(wǎng):
https://api.onlyoffice.com/editors/getdocs
四、測試
當(dāng)我調(diào)用config接口時,打開不同類型的文件,展示返回html頁面如下。
五、總結(jié)
1、要使用onlyoffice去在線編輯不難,主要是掌握config的配置。
2、它的一個工作流程:當(dāng)我打開在線編輯時,接口設(shè)置數(shù)據(jù)返回html頁面,并將數(shù)據(jù)拼接到config上。接著頁面會根據(jù)config的url地址去下載源文件,最后將內(nèi)容展示到html上。最后當(dāng)我們修改完畢關(guān)閉了窗口時,會調(diào)用callbackurl的接口進(jìn)行文件保存。
?
參考鏈接:鏈接1,鏈接(原理)2,鏈接3
如果本篇文章對你有幫助的話,很高興能夠幫助上你。
當(dāng)然,如果你覺得文章有什么讓你覺得不合理、或者有更簡單的實現(xiàn)方法又或者有理解不來的地方,希望你在看到之后能夠在評論里指出來,我會在看到之后盡快的回復(fù)你。