前言:
有些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="設置線寬"
οnclick="SetPenWidth()" />
<input id="Button4" type="button" οnclick="SetPenColor()"
value="設置顏色" />
<input id="Button1" type="button" value="撤銷最近一次手寫"
οnclick="UndoHandDraw()" />
<input id="Button2" type="button" οnclick="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/
如有侵權,請聯繫博主