吐血整理！后期会持续更新API！感觉有帮助的可以点赞！PageOffice整合SpringBoot，前后端分离架构搭建相关整理文档

最近在做一个新项目，新项目关于电子合同。需要用到pageOffice，然后让我去研究一下然后用pageOffice整合项目。我花了3天去研究熟悉pageOffice，从第一个demo实现到整合到自己的项目，今天整理出一个细节文档给大家使用。希望大家以后少走弯路。接下来，博主来说一下相关技术以及相关整理。

博主用的pageOffice是5.0.0.11 最新版。项目用的springBoot。我用pageOffice用到了其中的在线编辑word文档，还有提取用户输入的内容，还有word保护相关功能。还有pdf在线编辑功能。除了动态插入数据书签和动态提取内容是高级API，需要企业版，其他功能在pageOffice基础版都支持。

首先先去下载pageOffice的相关jar包和相关依赖。网址：http://www.zhuozhengsoft.com/ 或者私我要云盘的安装包。

前言，大家可以去官网去查看API文档，前端后端都有。我在这用到的几个核心类和API都在下图所示，核心包pageOffice,核心类：FileSaver、PageOfficeCtrl、PDFCtrl还有wordreader里面的DataRegion。几个在我的项目里用到。其他各位如果需要用到其他功能实现，可以具体参照API。

1.这里第一步，首先在pom.xml引入pageOffice的jar包。这里可以把pageOffice的jar包配置到本地maven库里。具体怎么配置本地maven库如下介绍：

将PageOffice的jar添加到Maven本地仓库
1. 拷贝pageoffice4.5.0.10.jar到D盘根目录；
2. 启动CMD命令窗口，输入：D: 回车，切换到D盘根目录下；
3. 输入：mvn install:install-file -DgroupId=com.zhuozhengsoft -DartifactId=pageoffice -Dversion=4.5.0.10 -Dpackaging=jar -Dfile=pageoffice4.5.0.10.jar

运行成功截图：配置本地maven

在pom.xml中添加依赖：

<dependency>

<groupId>com.zhuozhengsoft</groupId>

<artifactId>pageoffice</artifactId>

<version>5.0.0.11</version>

</dependency>

2.引入完相关jar。就开始进入主题！开始整合！

先定义Config实体类如下

package com.belenchan.pageOffice.config;

import com.zhuozhengsoft.pageoffice.poserver.Server;
import org.springframework.beans.factory.annotation.Value;
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 : BelenChan
 * @Date : 2020/7/27
 */
@Configuration
public class InitBeanConfig {

    // PageOffice配置 ${posyspath} 这里在application.yml里配置好具体盘符地址前缀
    @Value("${posyspath}") 
    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");
        srb.addUrlMappings("/posetup.exe");
        srb.addUrlMappings("/pageoffice.js");
        srb.addUrlMappings("/jquery.min.js");
        srb.addUrlMappings("/pobstyle.css");
        //srb.addUrlMappings("/sealsetup.exe");
        return srb;
    }

    public void setPosyspath(String posyspath) {
        this.posyspath = posyspath;
    }

}

这里的poserver.zz就是给pageOffice授权的程序，posetup.exe就是安装POBrowser需要的安装包。sealsetup.exe是电子印章需要用的安装包。我这里不需要。因为电子印章本来就有了。注意：这里的地址需要指定到controller的地址，关于请求到打开pageOffice的那个RequestMapping地址。不然会报错。

写好配置类后开始写后台controller。代码如下：

/**
     * 在线word文档编辑
     * @Author BelenChan
     * @param request
     * @param map
     * @return
     */
    @GetMapping("/openContract")
    @ApiOperation("在线word文档编辑  --CT")
    public String showWord(@RequestParam String id, HttpServletRequest request, Map<String, Object> map) {
            PageOfficeCtrl poCtrl = new PageOfficeCtrl(request);
            //设置授权程序servlet  和之前写配置类的poserver一样，具体到当前controller地址
            poCtrl.setServerPage("/poserver.zz");
            //添加自定义按钮
            poCtrl.addCustomToolButton("保存", "Save", 1);
            poCtrl.addCustomToolButton("打印", "PrintFile", 6);
            poCtrl.addCustomToolButton("全屏/还原", "IsFullScreen", 4);
            poCtrl.addCustomToolButton("关闭", "CloseFile", 21);
            //保存接口地址，这里如果需要传参数，只能在接口地址后用?加参数
            poCtrl.setSaveFilePage("/save?relativePath=" + path+ "&id=" + id+ "");
            //打开文件(打开的文件类型由OpenModeType决定，docAdmin是一个word，并且是管理员权限，如果是xls文件，则使用openModeType.xls开头的,其他的office格式同等)，最后一个参数是作者
            // TODO 这里有个坑，这里打开的文件是本地的，地址如果写成/结构的路径，页面就会找不到文件，会从http://xxxxx/D/id...去找，写成\\就是从本地找
            poCtrl.webOpen("D:\\pageOffice\\", OpenModeType.docAdmin, "BelenChan");
            //必须要写死的PageOfficeCtrl1，这个是核心
            map.put("pageoffice", poCtrl.getHtmlCode("PageOfficeCtrl1"));
            //跳转到index.html
        return "index";
    }
    /**
     * 保存文件接口
     * @Author BelenChan
     * @param request
     * @param response
     */
    @PostMapping("/save")
    public void saveFile(String id, String path, HttpServletRequest request, HttpServletResponse response) {
        // 保存修改后的文件
        FileSaver fs = new FileSaver(request, response);
        File file2 = new File(path+"pageOffice\\");//path="D:\\pageOff\\"
        try {
            file2.mkdirs();
            fs.saveToFile(path + fs.getFileName());//path="D:\\pageOff\\"
            fs.setCustomSaveResult("ok");//这是配置转发到前端弹框提示信息，与前端做交互
            fs.close();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

配置好

写好后台代码，把前端代码贴上。我这里是做的前后端分离的，但是整合pageOffice不好实现前后端分离。用最愚蠢的方法，前端写好一个静态页面放到我们后台服务里。然后前端需要调用pageoffice了就请求我的页面。这里注意下，前端的token无法放在请求头里。所以前端得把token放到url里传到页面。然后pageOffice执行完毕后，再把需要的具体参数返回给前端实际页面里。但是这里还需要考虑一个问题，就是把token返回前端的时候，可能会token失效。我想的死办法就是做个轮询方式。如果有好的想法建议也可以提出来。代码如下

<!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('/com/belenchan/openContract','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();
    document.getElementById("PageOfficeCtrl1").Alert("保存成功！" +document.getElementById("PageOfficeCtrl1").CustomSaveResult);//回调参数
    window.external.CallParentFunc("reFreshImage();");//回调方法
    window.external.close();
    }
</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>

这里回调参数弹框是 document.getElementById("PageOfficeCtrl1").Alert("保存成功！" +document.getElementById("PageOfficeCtrl1").CustomSaveResult); 返回后可以执行一个回调函数，不过函数要放在pageOffice定义好的模板里，如代码 window.external.CallParentFunc("reFreshImage();");

具体的代码细节需要根据各位项目的项目地址还有目录结构去更改。如果有什么需要补充的，或者遇到的问题可以提出来。

吐血整理！后期会持续更新API！感觉有帮助的可以点赞！PageOffice整合SpringBoot，前后端分离架构搭建相关整理文档

猜你喜欢