文章目录

  • 一、拉取镜像,启动
  • 二、配置onlyoffice
  • 三、编写保存接口
  • 四、添加中文字体


一、拉取镜像,启动

要使用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和设置的端口打开页面查看是否启动成功

二、配置onlyoffice

创建页面,导入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,清一下浏览器缓存,再查看效果

修改好的字体 最后看一下效果图

onlyoffice在线java onlyoffice在线编辑pdf_java