美文网首页我爱编程
pageoffice实现网页打开编辑保存word文档(基于SSM

pageoffice实现网页打开编辑保存word文档(基于SSM

作者: XuJiaxin_ | 来源:发表于2018-04-03 20:28 被阅读0次

    pageoffice是一款网页集成word.excel...等office工具
    并不免费,但可以试用练习
    SSM框架搭建过程就省略了
    注意:由于谷歌/火狐升级,不支持插件嵌入,建议使用POBrowser.openWindowModeless 的方法启动pageoffice.

    效果图:


    image.png

    1.使用前准备

    1. postup.exe安装


      image.png
    2. 导入jar包:pageoffice.jar


      image.png

      理论上不需要印章功能下面两个不需要导入,我只用到了第一个jar包,用于导出word文档在线编辑并保存.

    3. 再web.xml中添加下面代码:

      <!-- PageOffice Begin -->
        <servlet>
            <servlet-name>poserver</servlet-name>
            <servlet-class>com.zhuozhengsoft.pageoffice.poserver.Server</servlet-class>
        </servlet>
        <servlet-mapping>
            <servlet-name>poserver</servlet-name>
            <url-pattern>/poserver.zz</url-pattern>
        </servlet-mapping>
        <servlet-mapping>
            <servlet-name>poserver</servlet-name>
            <url-pattern>/sealsetup.exe</url-pattern>
        </servlet-mapping>
        <servlet-mapping>
            <servlet-name>poserver</servlet-name>
            <url-pattern>/posetup.exe</url-pattern>
        </servlet-mapping>
        <servlet-mapping>
            <servlet-name>poserver</servlet-name>
            <url-pattern>/pageoffice.js</url-pattern>
        </servlet-mapping>
        <servlet-mapping>
            <servlet-name>poserver</servlet-name>
            <url-pattern>/jquery.min.js</url-pattern>
        </servlet-mapping>
        <servlet-mapping>
            <servlet-name>poserver</servlet-name>
            <url-pattern>/pobstyle.css</url-pattern>
        </servlet-mapping>
        <servlet>
            <servlet-name>adminseal</servlet-name>
            <servlet-class>com.zhuozhengsoft.pageoffice.poserver.AdminSeal</servlet-class>
        </servlet>
        <servlet-mapping>
            <servlet-name>adminseal</servlet-name>
            <url-pattern>/adminseal.zz</url-pattern>
        </servlet-mapping>
        <servlet-mapping>
            <servlet-name>adminseal</servlet-name>
            <url-pattern>/loginseal.zz</url-pattern>
        </servlet-mapping>
        <servlet-mapping>
            <servlet-name>adminseal</servlet-name>
            <url-pattern>/sealimage.zz</url-pattern>
        </servlet-mapping>
        <mime-mapping>
            <extension>mht</extension>
            <mime-type>message/rfc822</mime-type>
        </mime-mapping>
        <context-param>
            <param-name>adminseal-password</param-name>
            <param-value>111111</param-value>
        </context-param>
        <!-- PageOffice End -->
    

    这里修改成您的印章简易管理页的管理员登录密码,为了安全,强烈建议修改!!!

    如果您用的是默认的Access数据库,下面节点不用修改,继续保持被注释状态或直接删除。 如果您用的是Oracle、MySQL等其他数据库,请将下面节点的注释去掉,并且修改成您的印章数据库连接参数。最好把WEB-INF\lib下的seal.mdb也删除掉。

    <context-param>
          <param-name>posealdb-driver</param-name>
          <param-value>oracle.jdbc.driver.OracleDriver</param-value>
      </context-param>
      <context-param>
          <param-name>posealdb-url</param-name>
          <param-value>jdbc:oracle:thin:@192.168.0.1:1521:orcl</param-value>
      </context-param>
      <context-param>
          <param-name>posealdb-username</param-name>
          <param-value>system</param-value>
      </context-param>
      <context-param>
          <param-name>posealdb-password</param-name>
          <param-value>111111</param-value>
      </context-param>
    
    

    2.使用方法

    1.再webapp下建一个文件夹doc,存储word文件


    image.png

    2.调用pageoffice需要在jsp中加入下面代码:

    <script type="text/javascript" src=" jquery.min.js"></script>
    <script type="text/javascript" src=" pageoffice.js" id="po_js_main"></script>

    注意:由于再 准备3 中已经再web.xml中配置了pageoffice.js和jquery.min.js,所以此处无需将js文件放入webapp目录下


    image.png

    3.index.jsp

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
    <%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
    %>
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
        <base href="<%=basePath%>"><
        
        <title>My JSP 'index.jsp' starting page</title>
        <meta http-equiv="pragma" content="no-cache">
        <meta http-equiv="cache-control" content="no-cache">
        <meta http-equiv="expires" content="0">    
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="This is my page">
        
         <!--PageOffice.js和jquery.min.js文件一定要引用-->
         <script type="text/javascript" src="jquery.min.js"></script>
         <script type="text/javascript" src="pageoffice.js" id="po_js_main"></script>
      </head>
      
      <body>
       <div style="text-align:center;">
        <b>在线编辑</b><br>
        <a href="javascript:POBrowser.openWindowModeless('openword' , 'width=1200px;height=800px;');">word测试</a><br>
       </div>
      </body>
    </html>
    

    4.word.jsp

    <%@ page language="java"
        import="java.util.*,com.zhuozhengsoft.pageoffice.*"
        pageEncoding="UTF-8"%>
    <%
    PageOfficeCtrl poCtrl=(PageOfficeCtrl)request.getAttribute("poCtrl");
    %>
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
       <title>最简单的打开保存Word文件</title>
    </head>
    <body>
        <script type="text/javascript">
            function Save() {
                document.getElementById("PageOfficeCtrl1").WebSave();
                 window.external.close();//关闭POBrowser窗口
            }
        </script>
        <div style="width:100%; height:100%;">
           <%=poCtrl.getHtmlCode("PageOfficeCtrl1")%>
        </div>
    </body>
    </html>
    
    

    5.Controller

    @RequestMapping("openword")  
        public String openword(HttpServletRequest request, HttpServletResponse response){
            PageOfficeCtrl poCtrl=new PageOfficeCtrl(request);
            //动态替换模版内容
            WordDocument doc=new WordDocument();
            doc.openDataRegion("Incubator").setValue("测试修改");//文档书签替换Incubator标签
            
            request.setAttribute("poCtrl", poCtrl);
            
            //设置服务页面
            poCtrl.setServerPage(request.getContextPath()+"/poserver.zz");
            //添加保存按钮
            poCtrl.addCustomToolButton("保存并关闭","Save",1);
            //设置保存的action
            poCtrl.setSaveFilePage("savefile");
            //打开word
            poCtrl.setWriter(doc);//将替换的标签注入文档中
            poCtrl.webOpen("doc/test.doc",OpenModeType.docAdmin,"张三");
            poCtrl.setTagId("PageOfficeCtrl1"); //此行必须
            
            return "Word";  
        } 
        
        //文件保存
        @RequestMapping("savefile")
         public  void  savefile(HttpServletRequest request, HttpServletResponse response){
            FileSaver fs = new FileSaver(request, response);
            fs.saveToFile(request.getSession().getServletContext().getRealPath("doc/") + "/" + fs.getFileName());
            fs.close();
        }
    

    完成.

    3.设置书签(区域动态填充数据)

    此功能为企业版或专业版功能,需要用专业版测试注册号注册

    1.添加书签(即区域)

    WordDocument doc=new WordDocument();
    //createDataRegion(区域名称,区域位置方位,位置)
    DataRegion dg1=doc.createDataRegion("PO_first", DataRegionInsertType.After , "[home]");
    //设置编辑属性
    dg1.setEditing(true);
    

    注意:书签命名规则未"PO_",后面设置值的时候直接使用""PO_""后的字段即可.
    首次添加书签,可以使用"[home]"或"[end]"表明区域位置.


    image.png

    2.区域内数据动态填充

    WordDocument doc=new WordDocument();
    //打开区域设置值
    doc.openDataRegion("first").setValue("测试填充数据");
    
    image.png

    4.问题总结

    1.无意间修改了路径,导致保存失败

    savefile.doc不存在问题

    原因:保存路径与文件打开路径不一致
    解决方案:在Controller中的savefile中修改fs.saveToFile(path)中的path路径,使其与word打开路径一致即可.


    image.png

    2.空指针异常
    缺失代码:
    非常重要,一定要加上,是控件的灵魂

    request.setAttribute("poCtrl", poCtrl);

    相关文章

      网友评论

        本文标题:pageoffice实现网页打开编辑保存word文档(基于SSM

        本文链接:https://www.haomeiwen.com/subject/vswchftx.html