pageoffice 實現 word 文件數據區域（書籤）響應事件

時間 2019-11-07

標籤 pageoffice 實現 word 文件數據區域書籤響應事件欄目 Microsoft Office 简体版

原文原文鏈接

1、核心代碼

poCtrl.setJsFunction_OnWordDataRegionClick("OnWordDataRegionClick()");

document.getElementById("PageOfficeCtrl1").ShowHtmlModalDialog(URL,Arguments,Features ); 
document.getElementById("PageOfficeCtrl1").ShowHtmlModelessDialog(URL,Arguments,Features );

2、具體實現過程

具體實現過程javascript

1.官網http://www.zhuozhengsoft.com/dowm/下載集成文件，引入jar包，配置web.xmlcss

2.在父頁面index.jsp(須要打開文檔的頁面)放一個a標籤或者button

寫a標籤以前先引入pageoffice須要的js文件（js文件的路徑是項目的根目錄下）html

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

而後添加a標籤 java

<a href="javascript:POBrowser.openWindowModeless('Word.jsp' , 'width=1200px;height=800px;');">響應數據區域點擊事件</a>

爲何要使用pobrowser方法，請參考http://www.javashuo.com/article/p-pftqppwq-hu.html

3.在父頁面同級目錄下建立一個名爲Word.jsp的文件

<%@ page language="java" import="java.util.*,java.awt.*"
	pageEncoding="utf-8"%>
<%@page
	import="com.zhuozhengsoft.pageoffice.*,com.zhuozhengsoft.pageoffice.wordwriter.*"%>
<%
	PageOfficeCtrl poCtrl = new PageOfficeCtrl(request);
	WordDocument doc = new WordDocument();
	DataRegion dataReg = doc.openDataRegion("PO_deptName");
	dataReg.getShading().setBackgroundPatternColor(Color.pink);
	//dataReg.setEditing(true);
	poCtrl.setWriter(doc);

	//設置服務器頁面
	poCtrl.setServerPage(request.getContextPath()+"/poserver.zz"); //此行必須
	poCtrl.setJsFunction_OnWordDataRegionClick("OnWordDataRegionClick()");
	poCtrl.setCaption("爲方便用戶知道哪些地方能夠編輯，因此設置了數據區域的背景色");
	poCtrl.setSaveFilePage("SaveFile.jsp");
	poCtrl.webOpen("doc/test.doc", OpenModeType.docSubmitForm, "張三");
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<title></title>
		<link href="images/csstg.css" rel="stylesheet" type="text/css" />

	</head>
	<body>

		
		<div id="content">
			<div id="textcontent" style="width: 1000px; height: 800px;">

	//全屏/還原
	function IsFullScreen() {
		document.getElementById("PageOfficeCtrl1").FullScreen = !document.getElementById("PageOfficeCtrl1").FullScreen;
	}

	function OnWordDataRegionClick(Name, Value, Left, Bottom) {
//注意pageoffice默認的值 name：PO_deptName，value：測試，left：827，bottom：356
//具體的參數能夠根據本身的需求改變
        if (Name == "PO_deptName") {
            var strRet = document.getElementById("PageOfficeCtrl1").ShowHtmlModalDialog("HTMLPage.htm", Value, "left=" + Left + "px;top=" + Bottom + "px;width=400px;height=300px;frame=no;");
            if (strRet != "") {
                return (strRet);
            }
            else {
                if ((Value == undefined) || (Value == ""))
                    return " ";
                else
                    return Value;
            }
        }

</script>

				<!--**************   卓正 PageOffice組件 ************************-->
			       <%=poCtrl.getHtmlCode("PageOfficeCtrl1")%>
			</div>
		</div>


	</body>
</html>

4：在Word.jsp頁面的同級目錄下添加 HTMLPage.htm 頁面jquery

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>輸入部門名稱</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <script type="text/javascript">
        function setValue() {
            document.getElementById("deptName").value = window.external.DialogArgs;
        }
        function getValue() {
            var deptName = document.getElementById("deptName").value;
            if (deptName != null && deptName != "") {
                window.external.DialogResult = deptName;
            }

            window.opener = null;
            window.open('', '_self');
            window.close();
            return;
        }

        function closeWindow() {
            window.opener = null;
            window.open('', '_self');
            window.close();
        }
    </script>

</head>
<body>
    <div>
        <form id="inputForm" action="">
        <div  style=" margin:0; padding:0; height:25px; background-color:lightGreen; line-height:25px; border: solid 1px blue; text-align:right; padding:0 10px;">
        <a href="#" onclick="window.opener=null;window.open('','_self');window.close();" style=" font-size:18px; text-decoration:none;">×</a>
        </div>
        <div  id="rect1" style=" margin:0; padding:0; height:200px; border: solid 1px blue;">
        <br />
        請輸入部門名稱：<input type="text" value="" id="deptName" />
        <br /><br />
        <input type="submit" value="肯定" onclick="getValue();" />
        <input type="submit" value="取消" onclick="closeWindow();" />
        </div>
        </form>
    </div>
    <script type="text/javascript">
        setValue();
    </script>
        <script language="javascript" type="text/javascript">
            document.getElementById("rect1").style.height = document.body.clientHeight - 90;
	</script>
</body>
</html>

若是彈出的模態框須要調用父頁面的方法，能夠用下面的方法web

var names = window.external.CallParentFunc("getNames");

在 HTMLPage.htm 寫一個調用父頁面方法的按鈕以及js服務器

<input type="button" value="調用父頁面的方法" onclick="getparents();" />
function getparents(){
            var names = window.external.CallParentFunc("getNames()");
            alert(names);
        }

Word.jsp 頁面寫對應的getNames方法less

function getNames() {
		return "測試";
	}

word.doc文件

3、實現效果

1：點擊彈出一個窗口jsp

修改input 框的值，好比「開發」點擊肯定之後，測試

2：執行調用父頁面的按鈕

點擊

會彈出

能夠下載完整的試用程序包參考一下：http://www.zhuozhengsoft.com/dowm/ ，部署一下Sampels4示例，看看

剛開始接觸pageoffice的話,也能夠看視頻快速上手http://www.zhuozhengsoft.com/Technical/

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

pageoffice 實現 word 文件 數據區域（書籤）響應事件