pageoffice 实现 word 文件 数据区域(书签)响应事件

安稳与你 提交于 2020-03-02 05:20:53

一、核心代码

poCtrl.setJsFunction_OnWordDataRegionClick("OnWordDataRegionClick()");

 

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

二、具体实现过程

具体实现过程

1.官网http://www.zhuozhengsoft.com/dowm/下载集成文件,引入jar包,配置web.xml

2.在父页面index.jsp(需要打开文档的页面)放一个a标签或者button

写a标签之前先引入pageoffice需要的js文件(js文件的路径是项目的根目录下)

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

然后添加a标签 

<a href="javascript:POBrowser.openWindowModeless('Word.jsp' , 'width=1200px;height=800px;');">响应数据区域点击事件</a>

为什么要使用pobrowser方法,请参考https://my.oschina.net/u/3507515/blog/3112495

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  页面

<!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>

如果弹出的模态框需要调用父页面的方法,可以用下面的方法

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方法

function getNames() {
		return "测试";
	}

word.doc文件

三、实现效果

1:点击弹出一个窗口

修改input 框的值,比如   “开发”  点击确定以后,

2:执行调用父页面的按钮

点击

会弹出 

 

可以下载完整的试用程序包参考一下:http://www.zhuozhengsoft.com/dowm/  ,部署一下Sampels4示例,看看

 

刚开始接触pageoffice的话,也可以看视频快速上手http://www.zhuozhengsoft.com/Technical/

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!