1、介紹javascript
pagaeoffice 在線打開文件須要用 pobrowser 方法彈出窗口的方式打開Office文件 。css
Chrome瀏覽器從42版本開始默認不啓動插件,從45版本開始完全關閉插件調用接口,網頁中的任何插件(包括網銀插件)都沒法在Chrome瀏覽器中運行。FireFox瀏覽器在2016年年初發布消息,到2016年年末Firefox瀏覽器將關閉插件調用接口,因此從Firefox的52版本開始全部網頁中的插件也都不能運行了。Chrome和Firefox中止對插件支持的緣由主要有兩點,第一是由於這兩個瀏覽器中的插件技術都是基於NPAPI技術接口標準的,這種技術接口的缺陷是開發的插件很不穩定,因此你們在使用Chrome和Firefox的時候若是網頁中使用了插件(包括Flash)就會常常出現瀏覽器崩潰的現象;第二點是如今HTML5技術的日益完善和推廣,已經能夠解決網頁中播放視頻的需求(網頁中使用頻率最高的插件就是Flash ,目的就是爲了播放視頻),因此從蘋果公司率先放棄Flash改用HTML5開始,Chrome和Firefox也放棄了對插件的支持。PageOfficeV4.0則採用POBrowser技術完美解決了這個問題,Chrome和Firefox均可以繼續運行PageOffice進行在線Office文檔操做。html
你們能夠參考一下PageOffice爲何用 pobrowser 方法彈出窗口的方式打開Office文件這篇文章詳細瞭解一下爲何要使用pobrowser方法。java
2、核心代碼web
(1)pobrowser 方法彈窗的 js 方法瀏覽器
(2)由於 pobrowser 方法不能再彈窗的頁面繼續使用 pobrowser 方法進行彈窗, 因此須要返回父頁面從新彈窗,返回父頁面的過程可傳遞一些參數 ,好比打開文件的請求 url 或者 文件名等。服務器
子頁面調用父頁面的方法less
3、實現過程jsp
舉個簡單的例子吧。pageoffice 在線打開 word 文件,進行word 轉pdf ,轉完以後打開pdf 文件。函數
首先在項目的根目錄下新建一個index.jsp文件。
<%@ page language="java" import="java.util.*,com.zhuozhengsoft.pageoffice.*" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <mate lang="en"> <meta charset="UTF-8"></mate> <title> 選項卡</title> <script type="text/javascript" src="pageoffice.js"></script> </head> <body> <script> function openPdf(fileName){ alert(fileName); POBrowser.openWindowModeless('OpenPDF.jsp?fileName='+fileName,'width=900px;height=900px;'); } </script> </body> <a href="javascript:POBrowser.openWindowModeless('Word.jsp','width=1200px;height=800px;');">打開文件</a> </body> </html>
在 index.jsp 頁面的同級目錄下建立一個Word.jsp頁面。
<%@ page language="java" import="java.util.*,com.zhuozhengsoft.pageoffice.*,com.zhuozhengsoft.pageoffice.wordwriter.*" pageEncoding="UTF-8"%> <%@page import="java.awt.Color"%> <% PageOfficeCtrl poCtrl = new PageOfficeCtrl(request); //設置服務器頁面 poCtrl.setServerPage(request.getContextPath() + "/poserver.zz"); //添加自定義按鈕 poCtrl.addCustomToolButton("保存pdf並打開pdf", "Save", 1); //設置保存頁面 poCtrl.setSaveFilePage("SaveFile.jsp"); //打開Word文檔 poCtrl.webOpen("test.doc", OpenModeType.docNormalEdit, "張佚名"); %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <body> <script type="text/javascript"> function Save() { //保存pdf document.getElementById("PageOfficeCtrl1").WebSaveAsPDF(); //返回值 var fileName = document.getElementById("PageOfficeCtrl1").CustomSaveResult; //調用父頁面 var sResult = window.external.CallParentFunc("openPdf('"+fileName+"');"); if(sResult=='poerror:parentlost'){ alert('父頁面關閉或跳轉刷新了,致使父頁面函數沒有調用成功!'); } } </script> <div style="height: 850px; width: 1036px; overflow: hidden;"> <%=poCtrl.getHtmlCode("PageOfficeCtrl1")%> </div> </body> </html>
一樣在Word.jsp的同級目錄下建立一個SaveFile.jsp頁面保存pdf。
<%@ page language="java" import="java.util.*,com.zhuozhengsoft.pageoffice.*" pageEncoding="utf-8"%> <% FileSaver fs = new FileSaver(request, response); fs.saveToFile(request.getSession().getServletContext().getRealPath("")+"/"+fs.getFileName()); // 吧pdf 文件名頁面 fs.setCustomSaveResult(fs.getFileName()); fs.close(); %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>My JSP 'SaveFile.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"> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> --> </head> <body> </body> </html>
4、最終效果
第一步:點擊打開文件的連接,會彈出一個顯示 word 的窗口,
第二步:點擊保存pdf並打開pdf的自定義按鈕,alert 彈出子頁面傳到父頁面的參數 文件名,緊接着打開pdf文件。
你們能夠在http://www.zhuozhengsoft.com/dowm/下載試用程序包,看看具體的示例以及代碼,詳細瞭解一下pageoffice。
也能夠看看觀看有關 pageoffice 使用的視頻