pageoffice實現網頁打開編輯保存word文檔(基於SSM框架)


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);



作者:XuJiaxin_
鏈接:https://www.jianshu.com/p/4a16355901e5
來源:簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM