赞
踩
要使用onlyoffice的在线编辑,需要从docker拉取镜像
onlyoffice/documentserver
docker pull onlyoffice/documentserver
启动onlyoffice
docker run --name onlyoffice -i -t -d -p 8000:80 onlyoffice/documentserver
查看日志
docker logs -f --tail=100 [容器id]
启动后通过ip和设置的端口打开页面查看是否启动成功
创建页面,导入api.js
<script type="text/javascript" src="http://192.168.3.19:8000/web-apps/apps/api/documents/api.js"></script>
添加div
<div id="placeholder" style="height: 100%;"></div>
配置如下:需要注意的是,onlyoffice中的配置的地址都是onlyoffice服务能直接访问到的地址,如:http://192.168.2.172:25001/documen/aaa.docx,不能使用127.0.0.1和localhost
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <html style="height: 100%;"> <head> <title></title> <meta name="keywords" content="HTML5 Bootstrap 3 Admin Template UI Theme" /> <meta name="description" content="Monster Dashboard - Multiskin Premium Admin Dashboard"> <meta name="author" content="MonsterDashboard"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script type="text/javascript" src="${pageContext.request.contextPath}/static/public/js/jquery/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="http://192.168.3.19:8000/web-apps/apps/api/documents/api.js"></script> <style type="text/css"> </style> </head> <body style="height: 100%; margin: 0;"> <div id="placeholder" style="height: 100%;"></div> </body> <script> (function(){ //业务id var busid="${param.busid}"; console.log(getRealUrl()); $.ajax({ type:"post", url:"${pageContext.request.contextPath}/file/getFileByBusId", data:{busId:busid}, success:function(res){ var data = jQuery.parseJSON(res); if(data.list.length>0){ var json=data.list[0]; editFile(json.id,json.temp1+json.filePath); } } }) function editFile(key,path){ console.log("path:"+path); var fileName=path.substring(path.lastIndexOf("/")+1); console.log("fileName:"+fileName); var suff=fileName.substring(fileName.lastIndexOf(".")+1); console.log("suff:"+suff); var documentType="word"; //跟据后缀判断打开文件类型 var WORD=["doc", "docm", "docx", "dot", "dotm", "dotx", "epub", "fodt", "fb2", "htm", "html", "mht", "odt", "ott", "pdf", "rtf", "txt", "djvu", "xml", "xps"]; var CELL=["csv", "fods", "ods", "ots", "xls", "xlsm", "xlsx", "xlt", "xltm", "xltx"]; var SLIDE=["fodp", "odp", "otp", "pot", "potm", "potx", "pps", "ppsm", "ppsx", "ppt", "pptm", "pptx"]; if(WORD.indexOf(suff)>-1){ documentType="word"; } if(CELL.indexOf(suff)>-1){ documentType="cell"; } if(SLIDE.indexOf(suff)>-1){ documentType="slide"; } var config={ "height": "100%", "width": "100%", "documentType": documentType,//文件类型word,cell,slide "lang": "zh-CN",//中文菜单 //要打开的文档配置 "document": { "fileType": suff, //文件类型(后缀) "key": new Date().getTime()+"",//根据key判断打开的文件 "title": fileName,//文件名称(不含后缀) "url": path//文件路径,必须是onlyoffice服务能直接访问的文件路径 }, //编辑配置 "editorConfig": { "lang": "zh-CN",//中文菜单 "mode": "edit",//编辑模式 //保存文件的回调 "callbackUrl": getRealUrl()+"/document/saveOnliOfficeFile?fid="+key, "customization":{ "forcesave":"true",//开启手动保存 "atuosave":"false", //开启自动保存 } } }; new DocsAPI.DocEditor("placeholder", config); } //===========获取基础地址============= function getRealUrl(){ var curWwwPath = window.document.location.href; var pathname= window.document.location.pathname; var contentPath=pathname.substring(0,find(pathname,"/",1)); var pos = curWwwPath.indexOf(pathname); var localhostPath = curWwwPath .substring(0,pos); var real_url = localhostPath+contentPath;//拼接项目基础路径 return real_url; } function find(str,cha,num){ var x=str.indexOf(cha); for(var i=0;i<num;i++){ x=str.indexOf(cha,x+1); } return x; } //===========获取基础地址 end============= })(); </script> </html>
上一步的保存文件的接口为/document/saveOnliOfficeFile,在自动保存和手动保存时都会调用
6 - 文档正在编辑,但当前文档状态已保存, 7 - 强制保存文档时出错. * */ //关闭后保存 if (status == 2 || status == 3 ) { /* * 当我们关闭编辑窗口后,十秒钟左右onlyoffice会将它存储的我们的编辑后的文件, * 此时status = 2,通过request发给我们,我们需要做的就是接收到文件然后回写该文件。 * */ /* * 定义要与文档存储服务保存的编辑文档的链接。 * 当状态值仅等于2或3时,存在链路。 * */ String downloadUri = (String) jsonObj.get("url"); System.out.println("====文档编辑完成,现在开始保存编辑后的文档,其下载地址为:" + downloadUri); //解析得出文件名 //String fileName = downloadUri.substring(downloadUri.lastIndexOf('/')+1); String fileName = request.getParameter("fileName"); System.out.println("====下载的文件名:" + fileName); URL url = new URL(downloadUri); java.net.HttpURLConnection connection = (java.net.HttpURLConnection) url.openConnection(); InputStream stream = connection.getInputStream(); //更换为实际的路径,保存硬盘中 File savedFile = new File("E:\\onlyoffice\\"+DateTools.getFormatDate("yyyy-MM-dd")+"\\"+fileName); try (FileOutputStream out = new FileOutputStream(savedFile)) { int read; final byte[] bytes = new byte[1024]; while ((read = stream.read(bytes)) != -1) { out.write(bytes, 0, read); } out.flush(); } connection.disconnect(); } //手动保存时 if(status == 6){ /* * 当我们关闭编辑窗口后,十秒钟左右onlyoffice会将它存储的我们的编辑后的文件, * 此时status = 2,通过request发给我们,我们需要做的就是接收到文件然后回写该文件。 * */ /* * 定义要与文档存储服务保存的编辑文档的链接。 * 当状态值仅等于2或3时,存在链路。 * */ String downloadUri = (String) jsonObj.get("url"); System.out.println("====文档编辑完成,现在开始保存编辑后的文档,其下载地址为:" + downloadUri); //解析得出文件名 //String fileName = downloadUri.substring(downloadUri.lastIndexOf('/')+1); String fileid = request.getParameter("fid"); File_Entity fe=fileService.getFileById(fileid); String fileName=fe.getFileName(); String uuidFileName=fe.getUuidFileName(); String filePath=fe.getFilePath(); System.out.println("====下载的文件名:" + fileName); URL url = new URL(downloadUri); java.net.HttpURLConnection connection = (java.net.HttpURLConnection) url.openConnection(); InputStream stream = connection.getInputStream(); //保存到原路径中 File savedFile = new File(BigFileUploadUtil.getBasePath()+"/"+filePath); //另存为,保存硬盘中,原文件不变 //File savedFile = new File("E:\\onlyoffice\\"+DateTools.getFormatDate("yyyy-MM-dd")+"\\"+fileName); if (!savedFile.getParentFile().exists()) { savedFile.getParentFile().mkdirs(); } try (FileOutputStream out = new FileOutputStream(savedFile)) { int read; final byte[] bytes = new byte[1024]; while ((read = stream.read(bytes)) != -1) { out.write(bytes, 0, read); } out.flush(); } connection.disconnect(); } } catch (Exception e) { e.printStackTrace(); } /* * status = 1,我们给onlyoffice的服务返回{"error":"0"}的信息, * 这样onlyoffice会认为回调接口是没问题的, * 这样就可以在线编辑文档了, * 否则的话会弹出窗口说明 * */ JSONObject obj=new JSONObject(); obj.put("error","0"); writer.write(JSONObject.fromObject(obj).toString()); writer.close(); writer.flush(); }
先删除onlyoffice自带的字体
docker exec -it (容器id) /bin/bash 进入容器删除默认字体
cd /usr/share/fonts/
rm -rf *
cd /var/www/onlyoffice/documentserver/core-fonts/
rm -rf *
将字体cp到容器内
docker cp /home/fonts/(当前字体目录) 容器id:/usr/share/fonts/truetype/custom(目标目录)
//再次进入容器:
docker exec -i -t adb(adb是容器id的前三位) /bin/bash
//执行:
/usr/bin/documentserver-generate-allfonts.sh
执行结束之后,不用重启onlyoffice,清一下浏览器缓存,再查看效果
修改好的字体
最后看一下效果图
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。