Spring Boot/Spring Cloud 集成Page Office支持word、excel、ppt在线浏览编辑

墨蓝 2022-03-26 07:27 2161阅读 0赞

最近做项目用到word、excel的在线浏览编辑功能，在网上找了很多的工具软件，一开始用的是office-online-server，参考[office官网文档][office]，最后领导认为他的样式过于简单，支持功能比较少，所以撤换掉用了page office。此次开发用到的是卓正公司的pageoffice集成，需要购买使用。

**简单介绍下Page Office：**

1. 在web网页里打开、编辑、打印预览、打印Word、Excel、PowerPoint等Office文档。

2. 强大的全屏/还原功能，便于用户编辑、浏览Office文档，又不影响网页布局美观。

3. 文档并发控制机制。为了防止同时在线编辑导致的混乱，PageOffice会发出通知并阻止其他人编辑此文档，直到你保存离开或时间锁过期。

4. 在线只读安全浏览Word、Excel、PowerPoint、PDF等Office文档，防复制粘贴、下载、打印等。

5. 提供Word修订痕迹、手写批注、圈阅划线、键盘批注、电子印章等OA公文模块的必备功能。

6. 根据数据库动态将数据，包括文本、图片、表格等填充、导出到Word、Excel模板中指定的位置处，并且可以动态指定内容的各种格式。支持批量导出。支持Word动态模板套红。支持动态创建、填充、生成新文档。

7. 提取Word、Excel文档中指定位置处的内容，包括文本、图片（Excel暂不支持）、表格等，保存到数据库。

8. 支持客户端不显示Word、Excel编辑器视图情况下的Word、Excel数据的导入导出功能。

9. 支持另存为HTML、MHT、PDF文档并发布到服务器的功能。

10. 支持动态生成PDF的功能。

11. 支持在线打开显示PDF（客户端无需安装PDF阅读器）。

12. 根据用户权限控制Word、Excel文档中用户可以编辑的区域，便于实现流转、会签、多用户实时编辑。

13. 合并多个Word文档为一个Word文档；拆分一个Word文档为多个Word文档。

14. 将Word、Excel设置成表单输入模式，用户只能在文档中指定的位置处输入内容，提交时可获取用户输入的内容。支持弹出网页对话框辅助用户输入数据。

**直接介绍集成的步骤：**

1. 到卓正官网上下载[http://www.zhuozhengsoft.com/dowm/][http_www.zhuozhengsoft.com_dowm]下载最新版的PageOffice 4.5 for JAVA项目，里面包含Samples、集成文件、序列号等；

2. 将集成文件里的jar包拷贝到src/lib目录下，添加maven本地依赖：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xhczcyMw_size_16_color_FFFFFF_t_70][]

<dependency>
                <groupId>com.zhuozheng</groupId>
                <artifactId>pageoffice</artifactId>
                <version>4.5.0</version>
                <scope>system</scope>
                <systemPath>${project.basedir}/src/lib/pageoffice4.5.0.6.jar</systemPath>
            </dependency>
            <dependency>
                <groupId>com.sql</groupId>
                <artifactId>sqlite-jdbc</artifactId>
                <version>3.7.2</version>
                <scope>system</scope>
                <systemPath>${project.basedir}/src/lib/sqlite-jdbc-3.7.2.jar</systemPath>
            </dependency>

这里注意打jar包运行时，需要将两个本地jar打进项目jar里，需要添加如下maven插件配置：

<build>
            <plugins>
                <plugin>
                    <groupId>org.springframework.boot</groupId>
                    <artifactId>spring-boot-maven-plugin</artifactId>
                    <configuration>
                        <includeSystemScope>true</includeSystemScope>
                    </configuration>
                </plugin>
            </plugins>
            <finalName>${project.artifactId}</finalName>
        </build>

3.新建word.html和index.html两个文件，这里时spring boot集成thymeleaf：

index.html

<!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        
        <script type="text/javascript" src="jquery.min.js"></script>
        <script type="text/javascript" src="pageoffice.js" id="po_js_main"></script>
        
    </head>
    <body>
    <a href="javascript:POBrowser.openWindowModeless('/word','width=1200px;height=800px;');">打开文件</a>
    </body>
    </html>

word.html

<!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    
    <input id="Button1" type="button" value="隐藏/显示 标题栏"  onclick="return Button1_onclick()" />
    <input id="Button2" type="button" value="隐藏/显示 菜单栏" onclick="return Button2_onclick()" />
    <input id="Button3" type="button" value="隐藏/显示 自定义工具栏"  onclick="return Button3_onclick()" />
    <input id="Button4" type="button" value="隐藏/显示 Office工具栏"  onclick="return Button4_onclick()" />
    
    <div style="width:1000px;height:700px;" th:utext="${pageoffice}"> </div>
    <script type="text/javascript">
    
        function Save() {
            document.getElementById("PageOfficeCtrl1").WebSave();
        }
        function PrintFile(){
            document.getElementById("PageOfficeCtrl1").ShowDialog(4);
    
        }
        function IsFullScreen(){
            document.getElementById("PageOfficeCtrl1").FullScreen = !document.getElementById("PageOfficeCtrl1").FullScreen;
    
        }
        function CloseFile(){
            window.external.close();
        }
    
        function BeforeBrowserClosed(){
            if (document.getElementById("PageOfficeCtrl1").IsDirty){
                if(confirm("提示：文档已被修改，是否继续关闭放弃保存 ？"))
                {
                    return  true;
    
                }else{
    
                    return  false;
                }
    
            }
        }
    
        // 隐藏/显示 标题栏
        function Button1_onclick() {
            var bVisible = document.getElementById("PageOfficeCtrl1").Titlebar;
            document.getElementById("PageOfficeCtrl1").Titlebar = !bVisible;
        }
    
        // 隐藏/显示 菜单栏
        function Button2_onclick() {
            var bVisible = document.getElementById("PageOfficeCtrl1").Menubar;
            document.getElementById("PageOfficeCtrl1").Menubar = !bVisible;
        }
    
    
        // 隐藏/显示 自定义工具栏
        function Button3_onclick() {
            var bVisible = document.getElementById("PageOfficeCtrl1").CustomToolbar;
            document.getElementById("PageOfficeCtrl1").CustomToolbar = !bVisible;
        }
        // 隐藏/显示 Office工具栏
        function Button4_onclick() {
            var bVisible = document.getElementById("PageOfficeCtrl1").OfficeToolbars;
            document.getElementById("PageOfficeCtrl1").OfficeToolbars = !bVisible;
        }
    </script>
    </body>
    </html>

4.编写controller接口

package com.central.file.controller;
    
    import com.zhuozhengsoft.pageoffice.FileSaver;
    import com.zhuozhengsoft.pageoffice.OpenModeType;
    import com.zhuozhengsoft.pageoffice.PageOfficeCtrl;
    
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RequestMethod;
    import org.springframework.web.bind.annotation.RestController;
    import org.springframework.web.servlet.ModelAndView;
    
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import java.util.Map;
    
    
    @RestController
    public class PageOfficeController {
    
        @RequestMapping(value="/index", method=RequestMethod.GET)
        public ModelAndView showIndex(){
            ModelAndView mv = new ModelAndView("index");
            return mv;
        }
    
        /**
         * office online打开
         *
         * @param request
         * @param map
         * @return
         */
        @RequestMapping(value="/word", method=RequestMethod.GET)
        public ModelAndView showWord(HttpServletRequest request, Map<String,Object> map){
    
            //--- PageOffice的调用代码 开始 -----
            PageOfficeCtrl poCtrl=new PageOfficeCtrl(request);
            poCtrl.setServerPage("/poserver.zz");//设置授权程序servlet
            poCtrl.addCustomToolButton("保存","Save()",1); //添加自定义按钮
            poCtrl.addCustomToolButton("打印", "PrintFile()", 6);
            poCtrl.addCustomToolButton("全屏/还原", "IsFullScreen()", 4);
            poCtrl.addCustomToolButton("关闭", "CloseFile()", 21);
            poCtrl.setSaveFilePage("/save");//设置保存的action
            poCtrl.webOpen("D:\\test.docx", OpenModeType.docAdmin,"张三");
            poCtrl.setCaption("信息平台");
            map.put("pageoffice",poCtrl.getHtmlCode("PageOfficeCtrl1"));
            //--- PageOffice的调用代码 结束 -----
            ModelAndView mv = new ModelAndView("word");
            return mv;
        }
    
        /**
         * 保存office
         *
         * @param request
         * @param response
         */
        @RequestMapping("/save")
        public void saveFile(HttpServletRequest request, HttpServletResponse response){
            FileSaver fs = new FileSaver(request, response);
            //保存文件
            fs.saveToFile("D:\\test.docx");
            fs.close();
        }
    
    }

5. 启动类XXXApplication.java增加pageoffice授权servlet，注解poSysPath用来存放卓正的注册信息的：

@Value("${file.save.path}")
    	String poSysPath;
    
    	/**
    	 * 添加PageOffice的服务器端授权程序Servlet（必须）
    	 * @return
    	 */
    	@Bean
    	public ServletRegistrationBean servletRegistrationBean() {
    		com.zhuozhengsoft.pageoffice.poserver.Server poserver = new com.zhuozhengsoft.pageoffice.poserver.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;
    	}

6.启动项目，访问http://localhost:8080/index，点击打开文件，会提示安装卓正的Page Office，点击安装，成功后会提示注册，这时候把第一步下载的序列号输入，其他的随便填写，就可以打开word的编辑了；

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xhczcyMw_size_16_color_FFFFFF_t_70 1][]

源码地址  [https://gitee.com/acelee723/acelee-pageoffice-demo][https_gitee.com_acelee723_acelee-pageoffice-demo]

[office]: https://docs.microsoft.com/zh-cn/officeonlineserver/deploy-office-online-server
[http_www.zhuozhengsoft.com_dowm]: http://www.zhuozhengsoft.com/dowm/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xhczcyMw_size_16_color_FFFFFF_t_70]: /images/20220326/9bc1897b29ab469b9237d6d27cbafe42.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xhczcyMw_size_16_color_FFFFFF_t_70 1]: /images/20220326/3cb3972e224d454b8330a17c0d6f2828.png
[https_gitee.com_acelee723_acelee-pageoffice-demo]: https://gitee.com/acelee723/acelee-pageoffice-demo