一:前言
OnlyOffice是一款强大的在线office工具,我们通过他可以让客户脱离于客户端环境,直接从web端进行文档编写。
这篇文章只是介绍一下onlyOffice的所需要的环境和基本使用方法(在线打开预览,在线编辑与保存)。
官网:https://www.onlyoffice.com/
二:环境搭建
- 由于只是简单调用,所以我们只需要安装docker(二次开发需node.js),并通过docker下载onlyOffice镜像
- docker安装教程:https://www.cnblogs.com/yufeng218/p/8370670.html
- -附赠docekr相关命令
启动 systemctl start docker
守护进程重启 sudo systemctl daemon-reload
重启docker服务 systemctl restart docker
重启docker服务 sudo service docker restart
关闭docker service docker stop
关闭docker systemctl stop docker - 下载onlyoffice镜像 docker pull onlyoffice/documentserver
- 启动镜像 sudo docker run -i -t -d -p 80:80 onlyoffice/documentserver (第一个80表示onlyoffice服务对外的端口号)
- 浏览器访问 ip:port (镜像所在服务器ip:docker启动镜像所设定的端口),出现下图表示onlyoffice启动成功
三:JAVA调用onlyoffice
官方示例 https://api.onlyoffice.com/app_data/editor/Java%20Example.zip
首页 index.jsp中使用fileupload方法上传文件,调用data-url后台方法把文件上传到服务器,js方法在jscript.js第31行。
<input type="file" id="fileupload" name="file" data-url="IndexServlet?type=upload" />
jscript.js中有编辑(beginEdit)和查看(beginView)两个事件,两个事件使用了一个后台方法,区分只是传入的mode参数不同。
- jq(document).on("click", "#beginEdit:not(.disable)", function () { var fileId = encodeURIComponent(jq("#hiddenFileName").val()); var url = UrlEditor + "?mode=edit&fileName=" + fileId; window.open(url, "_blank"); jq("#hiddenFileName").val(""); jq.unblockUI(); }); jq(document).on("click", "#beginView:not(.disable)", function () { var fileId = encodeURIComponent(jq("#hiddenFileName").val()); var url = UrlEditor + "?mode=view&fileName=" + fileId; window.open(url, "_blank"); jq("#hiddenFileName").val(""); jq.unblockUI(); });`
调用EditorServlet,后台代码设置一些参数,跳转到edit.jsp,现在说一下edit.jsp如何调用onlyoffice,以及调用onlyoffice所必要的参数。
edit.jsp必须引用onlyoffice服务器所对应的api.js,onlyoffice相关参数可在settings.properties里配置
jsp源码为 <script type="text/javascript" src="${docserviceApiUrl}"></script>
实际引用的是 http://ip:port/web-apps/apps/api/documents/api.js
jsp中调用onlyoffice只需要在div中加载onlyoffice组件即可
html部分
<body>
<div class="form">
<div id="iframeEditor"></div>
</div>
</body>
JS部分及相关参数说明:
var сonnectEditor = function () {
var config={
"document":{
"fileType": "文件类型如 '.docx' ",
"key": "文件唯一标识(详见代码逻辑)",
"title": "文件名称",
"url": "文件所在的网络地址(http://ip:port/demo.docx),此地址必须是onlyoffice服务器所能访问到的地址"
},
"documentType": "文档类型",
"editorConfig": {
"callbackUrl":"http://xxxx:xxx/CallBackServlet?fileName=xxx.docx 此地址为保存文档时的回调方法,用于保存文件",
"customization":{
"forcesave":"true"
},
"mode":"view 插件加载的类型,view只允许查看 edit可以编辑",
"lang":"zh-CN"
},
"height": "100%",
"width": "100%"
};
docEditor = new DocsAPI.DocEditor("iframeEditor", config);
};
if (window.addEventListener) {
window.addEventListener("load", сonnectEditor);
} else if (window.attachEvent) {
window.attachEvent("load", сonnectEditor);
}
注
- 如果onlyoffice加载文件时提示“文件下载失败”或者“Download failed”,是因为onlyoffice无法访问你提供给他的url属性,请检查两个服务器是否互通,防火墙和网关是否打开
- 令附 夏木炎大神对官方示例保存文件失败的问题修改 https://blog.csdn.net/xm393392625/article/details/86466817
引用如有侵权,反馈后立即删除
本文含有隐藏内容,请 开通VIP 后查看