OnlyOffice快速入门

最新推荐文章于 2024-04-12 00:44:33 发布

God_M

最新推荐文章于 2024-04-12 00:44:33 发布

阅读量4.7w

点赞数 16

文章标签： java docker 后端

本文链接：https://blog.csdn.net/yuchenff/article/details/103611401

版权

一：前言

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
引用如有侵权，反馈后立即删除

God_M

关注

16
点赞
踩
91

收藏

觉得还不错? 一键收藏
5
评论
OnlyOffice快速入门

这里写自定义目录标题一：前言二：环境搭建三：JAVA调用onlyoffice一：前言OnlyOffice是一款强大的在线office工具，我们通过他可以让客户脱离于客户端环境，直接从web端进行文档编写。这篇文章只是介绍一下onlyOffice的所需要的环境和基本使用方法（在线打开预览，在线编辑与保存）。官网：https://www.onlyoffice.com/二：环境搭建由于只是...
复制链接

扫一扫