精华内容
下载资源
问答
  • office在线编辑
    千次阅读
    2021-06-21 13:59:11

    一、拉取镜像,启动

    要使用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/(当前字体目录) /usr/share/fonts/truetype/custom(目标目录)
    //再次进入容器:
    docker exec -i -t adb(adb是容器id的前三位) /bin/bash
    //执行:
    /usr/bin/documentserver-generate-allfonts.sh
    

    执行结束之后,不用重启onlyoffice,清一下浏览器缓存,再查看效果

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

    更多相关内容
  • office在线编辑ONLYOFFICE集成java和前端office在线编辑ONLYOFFICE集成java和前端office在线编辑ONLYOFFICE集成java和前端office在线编辑ONLYOFFICE集成java和前端office在线编辑ONLYOFFICE集成java和前端
  • ONLYOFFICE集成java和前端
  • weboffice,Version=6,0,0,0 ,提供在线编辑word,excel,ppt功能
  • 三种解决方案的比较,office web apps,Office中间件pageOffice以及iWebOffice
  • DSOframer(Office在线编辑)开发资料收集 精品文档 精品文档 收集于网络如有侵权请联系管理员删除 收集于网络如有侵权请联系管理员删除 精品文档 收集于网络如有侵权请联系管理员删除 DSOframerOffice在线编辑开发...
  • Office在线编辑保存-Java版本 结合WebOffice编写的Doc,Excel文件在线编辑预览 环境: WebOffice V6.0.3.0 控件 DES电子印章系统 V4.2.4.4 客户端设备必须安装以上插件(只支持windows客户端) IE内核浏览器且需要...
  • 使用NTKO Office文档控件,能够在浏览器窗口中直接编辑Word, Excel等Office文档并保存到Web服务器。实现文档和电子表格的统一管理。同时支持强制痕迹保留,手写签名,电子印章等办公自动化系统必备的功能。是OA系统...
  • office在线编辑

    2014-09-24 10:07:39
    类似sharepoint中的特性,点击一个按钮,自动下载服务器上的excel、word等文件,并且自动由office打开,用户可以随意编辑,点击保存按钮后自动保存到服务器上。 通过使用ajax插件实现和使用sharepointActivex两种...
  • online-office:office在线编辑
  • Office文档在线预览-在线编辑解决方案-毕升OfficeAPI说明.docx
  • PageOffice支持在JSP页面中预览和编辑word,ppt,excel等PageOffice支持在JSP页面中预览和编辑word,ppt,excel等PageOffice支持在JSP页面中预览和编辑word,ppt,excel等PageOffice支持在JSP页面中预览和编辑word,ppt,...
  • office在线协作是o2oa和onlyoffice结合实现的一个在线办公套件,包括用于文本,电子表格和演示文稿的查看器和编辑器,与OfficeOpenXML格式完全兼容.docx,.xlsx,.pptx,并支持实时协作编辑。文件在线编辑多人同时...

    O2OA Office在线协作模块,可以让使用者完全基于浏览器实现Office文档的在线编辑,协同编辑功能,不需要在本地安装WPS,Office等应用软件,可以对文档的访问,编辑权限进行详细地控制,文档编辑更高效,更安全。O2OA是一款以流程管理为核心的全开源全免费的信息化开发平台,完整的代码可以直接在GithubGitee上下载,并且不需要支付任何费用,完全免费。

    O2OA办公开发平台是基于J2EE分布式架构,集成移动办公、智能办公、支持私有化部署,并自适应负载能力的基于AGPL协议开放源代码的企业信息化系统需求定制开发平台解决方案,能够极大程度上节约企业软件开发成本。

    在首页上的“平台下载”页面下,可以直接下载该平台,这篇文章主要介绍的是平台内置的Office在线协作功能。

    功能概述:

    office在线协作是o2oa和onlyoffice结合实现的一个在线办公套件,包括用于文本,电子表格和演示文稿的查看器和编辑器,与Office Open XML格式完全兼容:.docx,.xlsx,.pptx,并支持实时协作编辑。

    功能介绍:

    • 文件在线编辑
    • 多人同时编辑,可自定义同时编辑人数
    • 文件设有查看、编辑权限
    • 支持word、excel、ppt
    • 历史版本记录
    • 支持加签、加星分组

    默认服务器:

    如果未安装自己的onlyOffice服务器,默认使用的是我们的公司的测试doc.o2oa.net上的服务器。

    1.请确保您的服务器能访问到doc.o2oa.net。

    2.您的o2server 是公网环境下,端口(默认80 ,20020 ,20030)外网是可以访问的。

    3.根据需要关闭代理 config目录下node配置修改web中的两个代理proxyCenterEnable,proxyApplicationEnable配置为false

    配置:

    应用市场-office在线协作安装后就可以使用(注意:安装后需要重新编译数据表并重启服务器),“应用市场-office在线协作”使用的onlyoffice服务器是由o2oa在线服务所提供,如果想要使用自己的onlyoffice服务器,可以参考语雀文档

    onlyoffice安装说明: onlyoffice安装介绍 · 语雀 《onlyoffice安装介绍》

    json配置说明:office在线协助配置说明 · 语雀 《office在线协助配置说明》

    onlyoffice添加字体:onlyoffice字体添加 · 语雀 《onlyoffice字体添加》

    使用说明:

    新建

    点击右侧新建按钮可以选择要新建的文档类型:文件夹、word、excel、ppt。

    新建后点击新建的文件名会在新窗口打开该文档进行编辑保存,注意:编辑界面使用的是onlyoffice控件本身的编辑界面,完美兼容office。可多人在线同时编辑。鼠标移动自动保存。

    上传

    除了新建的方式,我们也可以通过上传来传文件,点击右上角“上传按钮”,支持上传word、excel、ppt三种格式的文档。

    点击右侧“

    ”图标可以对文档进行操作

    下载

    下载该文档

    移动

    把文档移动到其他文件夹下

    复制到

    把文档复制到其他文件夹下

    重命名

    给文档重新命名

    删除

    删除文档

    标签设置

    给文档设置标签

    同时在线设置

    设置文档同时在线人数,多余设置的人数时会提示再打开的用户当前文档已经超过了上限人数

    添加星标

    添加星标后可以在星标文件中查看

    分享

    把文档分享给公司内部其他人员,添加成员后默认该成员只有只读权限,可修改是否有修改文档的权限或者移除

    历史版本

    查看历史版本

    属性

    查看文档属性

    (转自公众号:浙江兰德网络)

    展开全文
  • weboffice 在线编辑

    2013-11-21 17:32:26
    在线编辑word,excel,资源包含实例代码,插件,稳定性较好
  • SpringBoot PageOffice 在线编辑 (完整版、有源码)

    万次阅读 多人点赞 2019-05-27 18:16:59
    文章目录简介实例环境准备生成license.lic文件把jar安装到maven使项目能够使用maven引入pom.xml 配置application.properties配置项目结构、代码介绍项目结构:BeanLinitConf类说明,PageOffice注入OfficeOnlineApi类...

    简介

    此文档讲的是SpringBoot和PageOffice整合,在线编辑office的文件,在网上找了很多资料
    第一个看到的是微软的“office online server”,这个太复杂了,需要安装中间件,安装还对系统有要求,必须是“windows server 2012 r2”或“Windows Server 2016”,但是这款是不收费的

    第二个看到的是卓正软件的PageOffice,这个是收费的,但是可以试用,下下来后demo也多,demo基本都是基于jsp页面的,我不想用jsp,我写的html页面

    第三个看到的是点聚的WebOffice,这个也是免费的,但是嘛,下下来的demo…不想说话,网页打开没有office客户端编辑那种界面,很不方便,也很不好操作,看了一眼直接放弃

    最后我选择使用PageOffice

    实例环境准备

    技术版本
    Jdk1.8
    SpringBoot2.1.5
    PageOffice4.5.0.9
    Tomcat8.0.32

    去官网下载PageOffice包,下载地址:
    http://www.zhuozhengsoft.com/download/PageOffice_4.5.0.9_Java.zip

    解压后里面会有:
    说明解压后的目录文件结构

    生成license.lic文件

    把Samples4文件夹复制到Tomcat的webapp目录下,在启动tomcat访:http://localhost:8080/Samples4
    访问后页面会提示输入公司名称等信息,然后输入序列号,序列号如上图文件目录下有个序列号.txt复制进去填入即可,我点击的是在线注册,注册成功后会在tomcat的webapp下的Samples4下的WEB-INF/lib目录下生成一个license.lic文件
    文件展示
    你也可以访问看demo,有很多实例,可以实现哪些功能:
    展示
    这时候tomcat已经没什么用了,可以关掉了

    把jar安装到maven使项目能够使用maven引入

    lib目录展示
    进入集成文件夹里面的lib目录,复制目录地址,打开命令窗口,使用cd进入复制的地址目录,执行:

    mvn install:install-file -DgroupId=com.zhuozhengsoft -DartifactId=pageoffice -Dversion=4.5.0.9  -Dpackaging=jar  -Dfile=pageoffice4.5.0.9.jar
    

    执行后结果展示

    pom.xml 配置

    <!-- 添加PageOffice依赖(必须) -->
    	<dependency>
    		<groupId>com.zhuozhengsoft</groupId>
    		<artifactId>pageoffice</artifactId>
    		<version>4.5.0.9</version>
    	</dependency>
    	<!-- 页面配置 -->
    	<dependency>
    		<groupId>org.springframework.boot</groupId>
    		<artifactId>spring-boot-starter-thymeleaf</artifactId>
    	</dependency>
    

    application.properties配置

    # 注册PageOffice后license.lic存放的路径,访问poserver.zz的时候需要license.lic文件(我这里就是resources目录下的file目录,我写的是绝对路径)
    posyspath=G:/ideaProject/springboot-demo/online-office/src/main/resources/file/
    

    项目结构、代码介绍

    项目结构:

    项目结构介绍

    BeanLinitConf类说明,PageOffice注入

    package com.onlineoffice.conf;
    
    import com.zhuozhengsoft.pageoffice.poserver.Server;
    import org.springframework.boot.context.properties.ConfigurationProperties;
    import org.springframework.boot.web.servlet.ServletRegistrationBean;
    import org.springframework.context.annotation.Bean;
    import org.springframework.context.annotation.Configuration;
    
    /**
     * @Description :初始化Bean
     * ---------------------------------
     * @Author : SG.Y
     * @Date : 2019/5/9 15:40
     */
    @Configuration
    @ConfigurationProperties
    public class BeanInitConf {
    
        // PageOffice配置
        private String posyspath;
    
        /***
         * PageOffice 注册
         * @return
         */
        @Bean
        public ServletRegistrationBean servletRegistrationBean() {
            Server poserver = new Server();
            //设置PageOffice注册成功后,license.lic文件存放的目录
            poserver.setSysPath(posyspath);
            ServletRegistrationBean srb = new ServletRegistrationBean(poserver);
            // 下面是把资源文件暴露出来,必须配置,否则页面访问不了
            srb.addUrlMappings("/poserver.zz", "/posetup.exe", "/pageoffice.js", "/jquery.min.js", "/pobstyle.css", "/sealsetup.exe");
            return srb;
        }
    
        public void setPosyspath(String posyspath) {
            this.posyspath = posyspath;
        }
    
    }
    

    OfficeOnlineApi类介绍

    package com.onlineoffice.api;
    
    import com.zhuozhengsoft.pageoffice.FileSaver;
    import com.zhuozhengsoft.pageoffice.OpenModeType;
    import com.zhuozhengsoft.pageoffice.PageOfficeCtrl;
    import org.springframework.beans.factory.annotation.Value;
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.GetMapping;
    import org.springframework.web.bind.annotation.RequestMapping;
    
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import java.util.Map;
    
    /**
     * @Description :Office在线编辑、预览API
     * ---------------------------------
     * @Author : SG.Y
     * @Date : 2019/5/14 16:36
     */
    @Controller
    public class OfficeOnlineApi {
    
        @Value("${posyspath}")
        private String filePath;
    
        /**
         * 在线word文档编辑
         *
         * @param request
         * @param map
         * @return
         */
        @GetMapping("/word")
        public String showWord(HttpServletRequest request, Map<String, Object> map) {
            PageOfficeCtrl poCtrl = new PageOfficeCtrl(request);
            //设置授权程序servlet
            poCtrl.setServerPage("/poserver.zz");
            //添加自定义按钮
            poCtrl.addCustomToolButton("保存", "Save", 1);
            //保存按钮接口地址
            poCtrl.setSaveFilePage("/save");
            //打开文件(打开的文件类型由OpenModeType决定,docAdmin是一个word,并且是管理员权限,如果是xls文件,则使用openModeType.xls开头的,其他的office格式同等),最后一个参数是作者
            // TODO 这里有个坑,这里打开的文件是本地的,地址如果写成/结构的路径,页面就会找不到文件,会从http://xxxxx/G/id...去找,写成\\就是从本地找
            poCtrl.webOpen("G:\\ideaProject\\springboot-demo\\online-office\\src\\main\\resources\\file\\test.docx", OpenModeType.docAdmin, "光哥");
            //pageoffice 是文件的变量,前端页面通过这个变量加载出文件
            map.put("pageoffice", poCtrl.getHtmlCode("PageOfficeCtrl1"));
            //跳转到word.html
            return "word";
        }
    
        /**
         * 在线ppt文档编辑
         *
         * @param request
         * @param map
         * @return
         */
        @GetMapping("/ppt")
        public String showPPT(HttpServletRequest request, Map<String, Object> map) {
            PageOfficeCtrl poCtrl = new PageOfficeCtrl(request);
            //设置授权程序servlet
            poCtrl.setServerPage("/poserver.zz");
            //添加自定义按钮
            poCtrl.addCustomToolButton("保存", "Save", 1);
            //保存接口地址
            poCtrl.setSaveFilePage("/save");
            //打开文件(打开的文件类型由OpenModeType决定,docAdmin是一个word,并且是管理员权限,如果是xls文件,则使用openModeType.xls开头的,其他的office格式同等),最后一个参数是作者
            // TODO 这里有个坑,这里打开的文件是本地的,地址如果写成/结构的路径,页面就会找不到文件,会从http://xxxxx/G/id...去找,写成\\就是从本地找
            poCtrl.webOpen("G:\\ideaProject\\springboot-demo\\online-office\\src\\main\\resources\\file\\test.pptx", OpenModeType.pptNormalEdit, "光哥");
            //pageoffice 是文件的变量,前端页面通过这个变量加载出文件
            map.put("pageoffice", poCtrl.getHtmlCode("PageOfficeCtrl1"));
            //跳转到word.html
            return "ppt";
        }
    
        /**
         * 保存文件接口
         *
         * @param request
         * @param response
         */
        @RequestMapping("/save")
        public void saveFile(HttpServletRequest request, HttpServletResponse response) {
            // 保存修改后的文件
            FileSaver fs = new FileSaver(request, response);
            fs.saveToFile("G:\\test\\在线编辑\\" + fs.getFileName());
            fs.close();
        }
    
    }
    

    word.html 页面介绍

    这里只展示word.html,ppt.html和word基本一样的

    <!DOCTYPE html>
    <html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="UTF-8">
        <title>在线编辑Office文件</title>
        <script type="text/javascript" src="jquery.min.js"></script>
        <script type="text/javascript" src="pageoffice.js" id="po_js_main"></script>
    </head>
    <body>
    <!--POBrowser打开一个窗口用来编辑文件-->
    <a id="open_a" style="display: none;" onclick="javascript:POBrowser.openWindowModeless('/word','width=1200px;height=800px;');" href="#">打开文件</a>
    <!-- 页面布局 -->
    <div style="width:100%;height:900px; align-content: center" th:utext="${pageoffice}"></div>
    <script type="text/javascript">
        function Save() {
            document.getElementById("PageOfficeCtrl1").WebSave();
        }
    </script>
    <script>
        $(function () {
            var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
            var isOpera = userAgent.indexOf("Opera") > -1;
    		
    		// 获取浏览器类型
            function getType() {
                //判断是否chorme浏览器
                if (userAgent.indexOf("Chrome") > -1) {
                    return "Chrome";
                }
                //判断是否IE浏览器
                if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) {
                    return "IE";
                }
    
                //判断是否Edge浏览器
                if (userAgent.indexOf("Trident") > -1) {
                    return "Edge";
                }
            }
    
            // POBrowser打开一个窗口用来编辑文件
            function open() {
                $("#open_a").click();
            }
    
            // pageOffice有很多浏览器都不支持,不支持则使用POBrowser打开一个窗口用来编辑文件
            if (getType() != 'Edge') {
                // 延迟一秒在打开,是因为如果即时打开,可能有些文件请求还没加载好,会检测出客户端未安装pageOffice控件
                setTimeout(open, 1000)
            }
    
        });
    </script>
    </body>
    </html>
    

    启动后访问:

    在线编辑Word:http://localhost:8080/word
    在线编辑PPT:http://localhost:8080/ppt
    

    在这里插入图片描述
    在这里插入图片描述

    源码下载

    下载地址:https://github.com/y15211669315/online-office.git

    展开全文
  • java后端尝试使用WebOffice在线编辑

    千次阅读 2021-08-03 11:37:19
    近期需要在项目中实现在线编辑word文档需求,因此尝试使用WebOfffice实现。官网手册十分详细,也可以加入他们的技术群。群内会有人解答技术问题。免费的方案下同时编辑的文件不多于20个,如果编辑需求量大,需要计费...

    概述

    近期需要在项目中实现在线编辑word文档需求,因此尝试使用WebOfffice实现。官网手册十分详细,也可以加入他们的技术群。群内会有人解答技术问题。免费的方案下同时编辑的文件不多于20个,如果编辑需求量大,需要计费。对于用户较少的小网站来说已经足够使用。

    官网手册

    https://wwo.wps.cn/docs/introduce/

    原理 流程图

    图

    来自<https://wwo.wps.cn/docs/introduce/technical-architecture/flow-chart/>

    申请账号

    申请服务商流程: https://open.wps.cn/apply-developer

    填写回调地址,回调域名需要带有协议头,且已部署于外网可访问

    签名算法

    1.新建Signature.java

    import javax.crypto.Mac;
    import javax.crypto.spec.SecretKeySpec;
    import java.io.UnsupportedEncodingException;
    import java.net.URLEncoder;
    import java.security.InvalidKeyException;
    import java.security.NoSuchAlgorithmException;
    import java.util.*;
    import static org.apache.commons.codec.binary.Base64.encodeBase64String;
    //import static org.apache.tomcat.util.codec.binary.Base64.encodeBase64String;
    
    /*生成signature签名算法*/
    public class Signature {
    
    	public static String getUrlParam(Map < String, String > params) throws UnsupportedEncodingException {
    		StringBuilder builder = new StringBuilder();
    		for (Map.Entry < String, String > entry : params.entrySet()) {
    			if (builder.length() > 0) {
    				builder.append('&');
    			}
    			builder.append(URLEncoder.encode(entry.getKey(), "utf-8")).append('=').append(URLEncoder.encode(entry.getValue(), "utf-8"));
    		}
    		return builder.toString();
    	}
    
    	public static String getSignature(Map < String, String > params, String appSecret) {
    
    		//params appSecret 密钥
    
    		List < String > keys=new ArrayList();
    		for (Map.Entry < String, String > entry : params.entrySet()) {
    			keys.add(entry.getKey());
    		}
    
    		// 将所有参数按 key 的升序排序
    		Collections.sort(keys, new Comparator<String>() {
    			public int compare(String o1, String o2) {
    				return o1.compareTo(o2);
    			}
    		});
    
    		// 构造签名的源字符串
    		StringBuilder contents = new StringBuilder("");
    		for (String key : keys) {
    			if (key == "_w_signature") {
    				continue;
    			}
    			contents.append(key + "=").append(params.get(key));
    			System.out.println("key:" + key + ",value:" + params.get(key));
    		}
    		contents.append("_w_secretkey=").append(appSecret);
    
    		// 进行 hmac sha1 签名
    		byte[] bytes = hmacSha1(appSecret.getBytes(), contents.toString().getBytes());
    		// 字符串经过 Base64 编码
    		String sign = encodeBase64String(bytes);
    		try {
    			sign = URLEncoder.encode(sign, "UTF-8");
    		} catch (UnsupportedEncodingException e) {
    			e.printStackTrace();
    		}
    		System.out.println(sign);
    		return sign;
    	}
    
    	public static byte[] hmacSha1(byte[] key, byte[] data) {
    		try {
    			SecretKeySpec signingKey = new SecretKeySpec(key, "HmacSHA1");
    			Mac mac = Mac.getInstance(signingKey.getAlgorithm());
    			mac.init(signingKey);
    			return mac.doFinal(data);
    		}
    		catch (NoSuchAlgorithmException e) {
    			e.printStackTrace();
    		} catch (InvalidKeyException e) {
    			e.printStackTrace();
    		}
    		return null;
    	}
    
    }
    

    2.生成签名

    官网测试示例 https://wwo.wps.cn/docs/server/description-of-signature-algorithm/

    "contents": "_w_appid=123456_w_fname=222.docx_w_userid=id1000_w_secretkey=7890"

    "signature": "dL3ce9l0l+GKTz+i0R++H2qWwrQ=" (未 URL 编码)

    	// 官网生成签名 测试示例
    	public String getSignature() throws UnsupportedEncodingException {
    		Map< String, String > paramMap= new HashMap<>();
    		String _w_appid="123456";
    		String _w_appkey="7890";
    		paramMap.put("_w_appid", _w_appid);
    		paramMap.put("_w_fname", "example.doc");
    		paramMap.put("_w_userid", "id1000");
    		String signature = Signature.getSignature(paramMap, _w_appkey);//_w_appkey 密钥
    		System.out.println(Signature.getUrlParam(paramMap) + "&_w_signature=" + signature);
    		return  signature; // "Mo2s%2FL1RdBnIuo%2FuEMC4ZSQyhnk%3D"
    	}
    

    后端实现回调接口

    需要实现文件预览,需要完成以下两个回调接口才能实现。文件编辑与文件新建也是需要完成对应的回调接口。

    文件预览

    回调地址

    方法

    功能

    描述

    /v1/3rd/file/info

    GET

    获取文件元数据

    在预览或编辑的时候,通过接口校验权限并获取文件信息

    /v1/3rd/onnotify

    POST

    通知

    打开文件时返回通知的接口

    来自 <https://wwo.wps.cn/docs/server/access-mode/>

    文件编辑

    回调地址

    方法

    功能

    描述

    /v1/3rd/file/info

    GET

    获取文件元数据

    在预览或编辑的时候,通过接口校验权限并获取文件信息

    /v1/3rd/user/info

    POST

    获取用户信息

    在编辑的时候获取编辑过此文件的用户信息,展示在协作记录里面

    /v1/3rd/file/save

    POST

    上传文件新版本

    编辑完保存回对应云盘

    /v1/3rd/file/online

    POST

    通知文件有那些人在协作协作

    通知此文件目前有那些人正在协作

    /v1/3rd/file/version/:version

    GET

    获取特定版本的文件信息

    在回滚版本的时候需要获取历史版本的文件信息

    /v1/3rd/file/rename

    PUT

    文件重命名

    当用户有重命名权限时,重命名时调用的接口

    /v1/3rd/file/history

    POST

    获取所有历史版本文件信息

    显示在历史版本列表中

    /v1/3rd/onnotify

    POST

    通知

    打开文件时返回通知的接口

    来自 <https://wwo.wps.cn/docs/server/access-mode/file-editing/>

    文件新建

    回调地址

    方法

    功能

    描述

    /v1/3rd/file/new

    POST

    新建文件

    通过模板新建需要提供的接口

    来自 <https://wwo.wps.cn/docs/server/access-mode/new-file/>

    示例:文件预览-回调接口/v1/3rd/file/info

    1.接口地址必须: "域名"  + "/v1/3rd/file/info"

    2.写接口逻辑

    3.返回接口参数必须与官方文档内的数据结构一致

    {
    
      file: {
    
        id: "132aa30a87064", //文件id,字符串长度小于40
    
        name: "example.doc", //文件名(必须带文件后缀)
    
        version: 1, //当前版本号,位数小于11
    
        size: 200, //文件大小,单位为B(文件真实大小,否则会出现异常)
    
        creator: "id0", //创建者id,字符串长度小于40
    
        create_time: 1136185445. //创建时间,时间戳,单位为秒
    
        modifier: "id1000", //修改者id,字符串长度小于40
    
        modify_time: 1551409818, //修改时间,时间戳,单位为秒
    
        download_url: "http://www.xxx.cn/v1/file?fid=f132aa30a87064", //自己的文档外网下载地址
    
        preview_pages: 3 //限制预览页数
    
        user_acl: {
    
          rename: 1, //重命名权限,1为打开该权限,0为关闭该权限,默认为0
    
          history: 1, //历史版本权限,1为打开该权限,0为关闭该权限,默认为1
    
          copy: 1, //复制
    
          export: 1, //导出PDF
    
          print: 1 //打印
    
        },
    
        watermark: {
    
          type: 1, //水印类型, 0为无水印; 1为文字水印
    
          value: "禁止传阅", //文字水印的文字,当type为1时此字段必选
    
          fillstyle: "rgba( 192, 192, 192, 0.6 )", //水印的透明度,非必选,有默认值
    
          font: "bold 20px Serif", //水印的字体,非必选,有默认值
    
          rotate: -0.7853982, //水印的旋转度,非必选,有默认值
    
          horizontal: 50, //水印水平间距,非必选,有默认值
    
          vertical: 100 //水印垂直间距,非必选,有默认值
    
        }
    
      },
    
      user: {
    
        id: "id1000", //用户id,长度小于32
    
        name: "wps-1000", //用户名称
    
        permission: "read", //用户操作权限,write:可编辑,read:预览
    
        avatar_url: "http://xxx.cn/id=1000" //用户头像地址
    
      }
    
    }

    4.调用地址

    https://wwo.wps.cn/office/<:type>/<:fileid>?_w_appid=xxx&_w_signature=xxx&…(对接模块需要的自定义参数)

    ·必须参数:type值对应文件格式

    支持格式

    type 值

    文件后缀

    文字文件

    w

    doc, dot, wps, wpt, docx, dotx, docm, dotm, rtf

    表格文件

    s

    xls, xlt, et, xlsx, xltx, csv, xlsm, xltm

    演示文件

    p

    ppt, pptx, pptm, ppsx, ppsm, pps, potx, potm, dpt, dps

    PDF 文件

    f

    pdf

    ·必须参数:fileid 文件唯一标识id

    ·必须参数:_w_appid申请的appid

    ·必须参数:_w_signature 使用Signature生成的签名

    ·其他参数:根据需要增加参数,需要以“_w_”开头拼接在调用地址中,同时生成签名时要加上参数

    ·示例:

    文件名 _w_fname、用户id _w_userid

    url: https://wwo.wps.cn/office/w/132aa30a87064?_w_userid=id1000&_w_appid=123456&_w_fname=example.doc&_w_signature=Mo2s%2FL1RdBnIuo%2FuEMC4ZSQyhnk%3D

    来自 <https://wwo.wps.cn/docs/server/access-mode/>

    5.访问页面效果

    注意事项

    • 服务要部署在公网,局域网 内网无法测试使用。
    • 回调地址要登录开放平台配置,与官方文档地址要一致
    • 对应功能的回调接口要实现,返回数据要与官方文档内的数据结构一致
    展开全文
  • DSOframer(Office在线编辑)开发资料收集.doc
  • office在线编辑演示
  • 因为项目的关系,研究了一下Office在线编辑功能,写出来共享一下。
  • onlyoffice在线编辑

    千次阅读 2018-07-19 09:44:00
    一、安装ONLYOFFICE Document Server 二、集成onlyoffice的二次开发 三、故障排除: 四、缺陷 五、总结 ONLYOFFICE Document Server提供文档协作的服务功能,支持Word,Excel和PowerPoint的协作。但是这里...
  • 一:准备工作: 1、两台Windows机器我用的...2、Microsoft Office Web Apps Server文件:wacserver.exe 3、Office Web Apps补丁文件:wacserver2013-kb2810007-fullfile-x64-glb.exe 4、语言包:wacserverlangua...
  • office 在线编辑

    2010-09-09 15:20:41
    office的word文档和excel文档可以在线打开,在线编辑在线保存,很好用的
  • webdav实现office在线编辑

    热门讨论 2012-05-28 14:12:53
    通过iis的webdav实现在线 编辑保存word文档 文档是如何设置成功的过程记录。环境 win7 sp1 office2007
  • 基于Office Online Server 的office在线编辑 基于Office Online Server 的office在线编辑... 2 1.硬件要求... 2 2.环境搭建... 2 2.1 环境搭建所需软件及更新包... 2 2.2 安装Windows Server 2012 R2. 3 2.3配置域控...
  • VUE引入ntko office在线编辑

    千次阅读 2020-05-11 12:43:14
    创建demo.vue let ntkoBrowser = require('../utils/ntkobackground.min.js').default.ntkoBrowser let ntkoed = ntkoBrowser.ExtensionInstalled(); // 打开控件 这块在路由中... } 创建demo1.vue 用于展示编辑页面
  • weboffice在线编辑office插件

    热门讨论 2012-05-28 15:57:21
    强大的office在线编辑工具,web开发实用性比较好,功能强大,希望你能用得上。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 80,234
精华内容 32,093
关键字:

office在线编辑