onlyoffice 在线编辑

已于 2023-01-16 11:19:01 修改
阅读量4k 收藏 22
点赞数 2
分类专栏： onlyoffice 文章标签： java
于 2021-06-21 14:13:44 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wang_gan_7889/article/details/118085344
版权

文章目录

一、拉取镜像,启动

要使用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,清一下浏览器缓存,再查看效果

修改好的字体
最后看一下效果图
在这里插入图片描述

江河君
关注
  • 2
    点赞
  • 踩
  • 22
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
office在线编辑ONLYOFFICE集成java和前端
10-09
office在线编辑ONLYOFFICE集成java和前端office在线编辑ONLYOFFICE集成java和前端office在线编辑ONLYOFFICE集成java和前端office在线编辑ONLYOFFICE集成java和前端office在线编辑ONLYOFFICE集成java和前端
onlyoffice在线编辑器演示项目
04-19
《ONLYOFFICE在线编辑器深度解析与应用实践》 ONLYOFFICE是一款强大的在线协作办公套件，它提供了文档、表格和演示文稿的编辑功能，支持多种格式，并且可以实现团队间的实时协作。本篇文章将深入探讨ONLYOFFICE在线...
Java集成Onlyoffice以及安装和使用示例，轻松实现word、ppt、excel在线编辑功能协同操作，Docker安装Onlyoffice
chenthe1的专栏
09-28 1万+
拉取onlyoffice镜像查看镜像是否下载完成启动onlyoffice以下是将本机的9001端口映射到docker的80端口上，访问时通过服务器ip：9001访问，并且用 -v 将本机机==/data/aws_s3/file-storage==文件夹挂载到docker的 /var/www/onlyoffice/documentserver/web-apps/wsData文件下，后续直接通过http请求读取对应的文件夹打开浏览器输入ip:9001出现以下页面就安装成功。
SpringBoot中整合ONLYOFFICE在线编辑
最新发布
Logic_YSY的博客
07-01 2040
文件的在线编辑主要就是依托与onlyoffice实现的，而编辑器的配置是通过我们的接口来定义的，接口中的配置可以自由的定义编辑器的文件类型，窗口大小，文件来源，回调地址，保存类型等等。你需要编辑的文件可以放在任意的位置，只要你的接口可以通过流的方式给到onlyofiice编辑器即可。文件编辑后的处理都是在回调中处理的，最好先看一下文档的回调写法。回调的时候记得打印日志，观察一下接口的内容，一定要记得是通过回调中的url参数来获取编辑后的文件流的，并不是通过回调接口直接把文件流给到你。
使用onlyoffice让你轻松实现word、ppt、excel在线编辑功能
热门推荐
IT学习小镇
01-16 3万+
了解onlyofficeONLYOFFICE Docs是一个开源办公套件，包括文本文档、电子表格和演示文稿的编辑器。它提供以下功能：1、创建、编辑和查看文本文档、...
文档管理系统OnlyOffice在线编辑功能
TeemlinkMarket的博客
11-30 2141
随着信息化时代的发展，越来越多的企业需求文档在线协作功能，正是在此趋势下，天翎知识文档管理系统联合OnlyOffice插件满足企业在线协同的需求，插件部署到服务器后，系统操作用户直接在浏览器操作即可实现在线编辑操作，无需额外在用户操作电脑中安装插件。
onlyoffice+vue实现在线预览在线编辑
X_WZJ的博客
04-11 2万+
vue整合onlyOffice实现文档在线预览编辑
onlyOffice实现office在线编辑java和前端demo
02-17
- 用户界面集成：将ONLYOFFICE编辑器嵌入到你的前端应用中，确保用户体验顺畅。 3. **Apache服务器配置**： - 部署准备：如果你的Java应用和ONLYOFFICE都在Apache服务器上运行，需要配置Apache以正确代理请求，...
在线编辑onlyOffice前端引入js包
09-20
在线编辑onlyOffice前端引入js包是实现与onlyOffice集成的关键步骤。onlyOffice是一款强大的在线文档编辑器，允许用户在浏览器中直接编辑、协作处理Word、Excel和PowerPoint文档。为了在您的网页应用中嵌入only...
onlyoffice api开发
02-24
ONLYOFFICE 是一款开源的在线文档编辑套件，它提供了丰富的API接口，允许开发者集成到自己的应用程序中，实现协作编辑、文档管理等功能。在C#环境下进行ONLYOFFICE API开发，我们可以利用.NET Framework或.NET Core...
ONLYOFFICE-OnlineEditors:ONLYOFFICE-在线编辑器
07-06
ONLYOFFICE 在线编辑器是免费的开源编辑器，包括文本、电子表格和演示文稿的查看器和编辑器，是第一款基于画布的文档编辑器。 它们在浏览器、协作编辑和评论中提供最高的格式质量。 这个版本可以部署在你自己的服务器上。 概述 ONLYOFFICE 在线编辑器是在 GNU Affero 通用公共许可证下分发的可免费下载的开源版本。 功能 它包括文本、电子表格和演示文稿的查看器和编辑器，包括： ONLYOFFICE 文档编辑器 ONLYOFFICE 电子表格编辑器 ONLYOFFICE 演示文稿编辑器 项目信息 官网： : 代码库： : 许可证： SaaS 版本： : 文档 您可以编译 ONLYOFFICE 在线编辑器并将其安装到您的本地服务器上，或者使用我们的安装程序跳过编译阶段并为您安装。 以下文档可供社区使用，具体取决于您选择的方式：
ONLYOFFICE免费开源多人在线文档协作系统的部署与开发细节
04-04
ONLYOFFICE免费开源多人在线文档协作系统的部署与开发细节
在线Word编辑-OnlyOffice开源框架
阳宗德的博客
07-04 2698
社区版允许您在本地服务器上安装ONLYOFFICE Docs，并将在线编辑器与ONLYOFFICE协作平台或其他流行系统集成。ONLYOFFICE Docs 是一个在线办公套件，包括文本、电子表格和演示文稿的查看器和编辑器，完全兼容 Office Open XML 格式：.docx、.xlsx、.pptx，并支持实时协作编辑。
onlyoffice在线编辑
weixin_33974433的博客
07-19 3216
一、安装ONLYOFFICE Document Server 二、集成onlyoffice的二次开发 三、故障排除： 四、缺陷 五、总结 ONLYOFFICE Document Server提供文档协作的服务功能，支持Word，Excel和PowerPoint的协作。但是这里，需要进行文档管理和存储的二次开发。 一、安装ONLYOFFICE Docume...
搭建onlyoffice实现多人在线编辑，以及添加中文字体，使用自定义插入的插件
weixin_43671737的博客
10-20 6780
搭建onlyoffice实现多人在线编辑，以及添加中文字体，使用自定义插入的插件
onlyoffice协同编辑（多人共享编辑）、在线文档编辑，支持word、excel
IT_dabai的博客
12-08 6046
onlyoffice协同编辑（多人共享编辑）、在线文档编辑，支持word、excel
前端vue使用onlyoffice控件实现word在线编辑、预览（仅列出前端部分需要做的工作，不包含后端部分）
个人博客
06-28 3648
ONLYOFFICE 文档 是一个开源办公套件，包括文本文档、电子表格、演示文稿和可填写表单的编辑器。它提供以下功能：创建、编辑和查看文本文档、电子表格、演示文稿和可填写表单；与其他队友实时协作处理文件。基于这个控件，可以实现前端word、excel、pdf等文件在线编辑、预览，可以说非常强大，目前项目中只使用到word编辑预览，但拓展其他文件也非常简单，完善类型传参，更改onlyoffice配置参数中的文件类型即可。
vue获取onlyoffice在线编辑器的html
06-06
要在Vue中获取OnlyOffice在线编辑器的HTML，你可以使用OnlyOffice的JavaScript API。以下是一个示例代码： ```javascript // 获取OnlyOffice在线编辑器的HTML function getDocumentContent() { const docEditor = window.documentEditor; docEditor.document.getContent((content) => { console.log(content); // 这里可以将content保存到数据库或者发送到后端服务器 }); } // 在Vue组件中使用 export default { mounted() { // 在组件挂载后，初始化OnlyOffice编辑器 this.initEditor(); }, methods: { initEditor() { const editorElement = this.$refs.onlyOfficeEditor; const editorConfig = { type: 'desktop', document: { fileType: 'docx', url: 'http://your-document-url', }, editorConfig: { callbackUrl: 'http://your-callback-url', }, events: { onDocumentStateChange: (event) => { // 处理文档状态变化的事件 }, }, }; window.documentEditor = new DocsAPI.DocEditor(editorElement, editorConfig); }, getContent() { // 调用getDocumentContent()获取文档内容 getDocumentContent(); }, }, }; ``` 在这个示例代码中，我们首先定义了一个名为`getDocumentContent()`的函数，用于获取OnlyOffice在线编辑器的HTML内容。然后，在Vue组件中，我们通过`initEditor()`方法初始化OnlyOffice编辑器，并且将编辑器实例保存到`window.documentEditor`对象中，以便在其他方法中使用。最后，我们在组件中定义了一个名为`getContent()`的方法，用于在用户点击按钮时调用`getDocumentContent()`方法来获取文档内容。
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值