前言:
有些OA系统会有用户在线对word文档添加手写批注的需求,这样的需求看似不好实现,其实是可以实现的。
但是这需要开发者具备将activex控件集成到Java环境的能力。对于大部分Java开发工程师来说,仅仅解决单一的功能就要掌握activex控件,未免学习成本太大。
所以我们今天就要介绍一个中间件技术——pageoffice,此中间件技术已经将 在web系统操作office文档的大部分功能整合完毕,大家只需要关注自己web系统的业务逻辑即可,学习成本低,且功能很丰富。下面我们来实战用pageoffice实现一下用Java语言在线打开word文档的同时,向word文档中添加手写批注的功能。
先看效果:
可以看到,文档在页面中打开的效果和本地office打开的效果差不多,且手写批注的功能也轻松的实现了。
部署步骤(只需4步)
1.官网http://www.zhuozhengsoft.com/dowm/下载集成文件,引入jar包,配置web.xml
去刚才下载的集成文件中找到lib,将里面的内容放在项目web-inf的lib中引入jar包,然后将web.xml的pageoffice配置引入到自己项目的wb.xml中
2.在父页面aaa.jsp(需要打开文档的页面)放一个a标签或者button
写a标签之前先引入pageoffice需要的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>
3.在父页面同级目录下创建一个名为Word.jsp的文件
<%@ page language="java"
import="java.util.*,com.zhuozhengsoft.pageoffice.*"
pageEncoding="utf-8"%>
<%
//******************************卓正PageOffice组件的使用*******************************
PageOfficeCtrl poCtrl1 = new PageOfficeCtrl(request);
poCtrl1.setServerPage(request.getContextPath()+"/poserver.zz"); //此行必须
//隐藏菜单栏
poCtrl1.setMenubar(false);
//添加自定义按钮
poCtrl1.addCustomToolButton("开始手写", "StartHandDraw()", 5);
poCtrl1.addCustomToolButton("设置线宽", "SetPenWidth()", 5);
poCtrl1.addCustomToolButton("设置颜色", "SetPenColor()", 5);
poCtrl1.addCustomToolButton("设置笔型", "SetPenType()", 5);
poCtrl1.addCustomToolButton("设置缩放", "SetPenZoom()", 5);
poCtrl1.addCustomToolButton("访问手写集", "GetHandDrawList()", 6);
poCtrl1.webOpen("test.doc", OpenModeType.docNormalEdit, "张三");
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<script language="JavaScript">
//开始手写
function StartHandDraw() {
document.getElementById("PageOfficeCtrl1").HandDraw.Start();
}
//设置线宽
function SetPenWidth() {
document.getElementById("PageOfficeCtrl1").HandDraw.SetPenWidth(5);
}
//设置颜色
function SetPenColor() {
document.getElementById("PageOfficeCtrl1").HandDraw.SetPenColor(5292104);
}
//设置笔型
function SetPenType() {
document.getElementById("PageOfficeCtrl1").HandDraw.SetPenType(1);
}
//设置缩放
function SetPenZoom() {
document.getElementById("PageOfficeCtrl1").HandDraw.SetPenZoom(50);
}
//撤销最近一次手写
function UndoHandDraw() {
document.getElementById("PageOfficeCtrl1").HandDraw.Undo();
}
//退出手写
function ExitHandDraw() {
document.getElementById("PageOfficeCtrl1").HandDraw.Exit();
}
//访问手写集合
function GetHandDrawList() {
var handDrawList = null;
var handDraw = null;
handDrawList = document.getElementById("PageOfficeCtrl1").HandDraw;
handDrawList.Refresh();
document.getElementById("PageOfficeCtrl1").Alert("本文档共有 " + handDrawList.Count + " 个手写批示。");
var i = 0; //索引从0开始
for (i = 0; i < handDrawList.Count; i++) {
handDraw = handDrawList.Item(i);
handDraw.Locate();
document.getElementById("PageOfficeCtrl1").Alert("第" + handDraw.PageNumber + "页" + ", " + handDraw.UserName + ", " + handDraw.DateTime);
}
}
</script>
</head>
<body>
<div
style="font-size: 12px; line-height: 20px; border-bottom: dotted 1px #ccc; border-top: dotted 1px #ccc; padding: 5px;">
<span style="color: red;">操作说明:</span>若想提前设置线宽、颜色、笔型、缩放等,可先点击自定义工具栏上的相应按钮,然后点击“开始手写”按钮。在尚未关闭手写工具栏时,点“撤销最近一次手写”按钮,可撤销最近一次的手写;点击“退出手写”按钮,可退出手写;还可点“设置线宽”、“设置颜色”等按钮对手写批注的颜色、线宽等进行再次设置。
<br />
关键代码:点右键,选择“查看源文件”,看js函数
<br />
<input id="Button3" type="button" value="设置线宽"
onclick="SetPenWidth()" />
<input id="Button4" type="button" onclick="SetPenColor()"
value="设置颜色" />
<input id="Button1" type="button" value="撤销最近一次手写"
onclick="UndoHandDraw()" />
<input id="Button2" type="button" onclick="ExitHandDraw()"
value="退出手写" />
<span style="background-color: Yellow;"></span>
</div>
<br />
<form id="form1">
<div style="height: 700px; width: auto;">
<%=poCtrl1.getHtmlCode("PageOfficeCtrl1")%>
</div>
</form>
</body>
</html>
4.新建文件
新建一个名为test.doc的word文件(如果新建的是docx文件就将第三步的poCtrl1.webOpen("test.doc", OpenModeType.docNormalEdit, "张三");代码改为poCtrl1.webOpen("test.docx", OpenModeType.docNormalEdit, "张三");
将新建的test.doc文件放在Word.jsp同级目录下。
本地打开test.doc文件,随意编辑一些内容,保存.
然后启动项目直接访问aaa.jsp点击链接.此时会提示安装插件,点击安装成功后提示注册,填写相关信息,填写注册码Q37LN-W8NI-KFSQ-LEY3Y就可以打开文档.
注意:此示例只演示了手写批注,没有实现保存功能.如果需要更丰富的功能,可以去pageoffice官网下载示例代码直接将samples4文件夹拷贝到Tomcat的webapps下,启动Tomcat,浏览器访问http://localhost:8080/Samples4/index.html,查看示例中的下面一个链接,直接看samples4文件夹下WordHandDraw文件夹里面的代码.
刚开始接触pageoffice的话,也可以看视频快速上手http://www.zhuozhengsoft.com/Technical/
如有侵权,请联系博主