最近一个需求在网页上编辑word 文档,网上看了看就是PageOffice比较简单实用。
先来个官网的demo下载地址http://www.zhuozhengsoft.com/dowm/根据它的描述可以轻松的运行起来
首先环境配置web.xml里先加上
<!-- PageOffice Begin -->
<servlet>
<servlet-name>poserver</servlet-name>
<servlet-class>com.zhuozhengsoft.pageoffice.poserver.Server</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>poserver</servlet-name>
<url-pattern>/poserver.zz</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>poserver</servlet-name>
<url-pattern>/sealsetup.exe</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>poserver</servlet-name>
<url-pattern>/posetup.exe</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>poserver</servlet-name>
<url-pattern>/pageoffice.js</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>poserver</servlet-name>
<url-pattern>/jquery.min.js</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>poserver</servlet-name>
<url-pattern>/pobstyle.css</url-pattern>
</servlet-mapping>
<servlet>
<servlet-name>adminseal</servlet-name>
<servlet-class>com.zhuozhengsoft.pageoffice.poserver.AdminSeal</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>adminseal</servlet-name>
<url-pattern>/adminseal.zz</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>adminseal</servlet-name>
<url-pattern>/loginseal.zz</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>adminseal</servlet-name>
<url-pattern>/sealimage.zz</url-pattern>
</servlet-mapping>
<mime-mapping>
<extension>mht</extension>
<mime-type>message/rfc822</mime-type>
</mime-mapping>
<context-param>
<param-name>adminseal-password</param-name>
<param-value>111111</param-value>
</context-param>
<!-- PageOffice End -->
之后把pageoffice4.5.0.6.jar 包导入 你的项目。如果你的项目使用了Maven,需要将这个jar 导入到maven 仓库里
把jar 放在你的maven 安装的根目录 我的是C盘,如果没有找到你看报错会看到地址不对,移动到相应的地址相面就可以。
mvn install:install-file -DgroupId=com.zhuozhengsoft -DartifactId=pageoffice -Dversion=4.5.0.6 -Dpackaging=jar -Dfile=pageoffice4.5.0.6.jar
当你看到BUILD SUCCESS
就可以在你的pom.xml里加上
<!-- pageoffice -->
<dependency>
<groupId>com.zhuozhengsoft</groupId>
<artifactId>pageoffice</artifactId>
<version>4.5.0.6</version>
</dependency>
至此配置已经完成了。
之后介绍我的Ctlr 下面的操作就是从服务器获取你需要在线编辑的word 文档 的路径然后返回到你的JSP就可以了。
@RequestMapping("/index/{id}/{fileid}")
public ModelAndView index(HttpServletRequest request, HttpServletResponse response,@PathVariable("id") String id,@PathVariable("fileid") String fileid){
PageOfficeCtrl poCtrl=new PageOfficeCtrl(request);
//这一步就是把定义的参数传给jsp 显示
request.setAttribute("poCtrl", poCtrl);
//设置服务器页面
poCtrl.setServerPage(request.getContextPath()+"/poserver.zz");
//添加自定义按钮
poCtrl.addCustomToolButton("保存","Save",1);
poCtrl.addCustomToolButton("打印设置","PrintSet",0);
poCtrl.addCustomToolButton("打印","PrintFile",6);
poCtrl.addCustomToolButton("全屏/还原", "IsFullScreen", 4);
poCtrl.addCustomToolButton("-", "", 0);
poCtrl.addCustomToolButton("关闭","Close",21);
//设置保存页面,这个是你保存的方法。
poCtrl.setSaveFilePage(request.getContextPath()+"/pageoffice/savefile/"+id);
//打开Word文档
//这里开始都是获取我服务器上的文件路径
String basePath = "C://temporary/";
java.io.File destFile = new java.io.File(basePath);
if (!destFile.exists()) {
destFile.mkdirs();
}
FileInfoModel file = informationService.findFileInfoById(fileid);
java.io.File f = new java.io.File(basePath + file.getFileName());
try {
FileOutputStream fos = new FileOutputStream(f.getAbsolutePath());
fos.write(file.getFileBytes());
fos.close();
} catch (FileNotFoundException e) {
// TODO Auto-generated catch block
e.printStackTrace();
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
//文件获取结束f.getAbsolutePath() 就是需要打开的文件地址
poCtrl.webOpen(f.getAbsolutePath(),OpenModeType.docNormalEdit,"张佚名");
//展示的jsp,相应的jsp有需要注意的地方
ModelAndView mav = new ModelAndView("/pageoffice/Word");
return mav;
}
接下来就是word.jsp
<%@ page language="java"
import="java.util.*,com.zhuozhengsoft.pageoffice.*"
pageEncoding="utf-8"%>
//关键one, request.getAttribute("poCtrl")在ctrl 里面存进去。现在拿出来
<%
PageOfficeCtrl poCtrl = (PageOfficeCtrl) request.getAttribute("poCtrl");
%>
//导入你的地址不然脚本错误
<script src="${static_}/hadmin/js/jquery.min.js?v=2.1.4"></script>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>苏州相城区行政审批局</title>
<style type="text/css">
/* CSS样式制作 */
*{padding:0px; margin:0px;}
a{ text-decoration:none; color:black;}
a:hover{text-decoration:none; color:#336699;}
#tab{width:auto; padding:5px;height:150px;margin:20px;}
#tab ul{list-style:none; height:30px;line-height:30px; border-bottom:2px #C88 solid;}
#tab ul li{background:#FFF;cursor:pointer;float:left;list-style:none height:29px; line-height:29px;padding:0px 10px; margin:0px 3px; border:1px solid #BBB; border-bottom:2px solid #C88;}
#tab ul li.on{border-top:2px solid Saddlebrown; border-bottom:2px solid #FFF;}
#tab div{height:700px;width:auto; line-height:24px;border-top:none; padding:1px; border:1px solid #336699;padding:10px;}
.hide{display:none;}
.show{ display:block;}
.page{}
</style>
<script type="text/javascript">
// JS实现选项卡切换
window.onload = function() {
var myTab = document.getElementById("tab"); //整个div
var myUl = myTab.getElementsByTagName("ul")[0]; //一个节点
var myLi = myUl.getElementsByTagName("li"); //数组
var myDiv = $(".page"); //myTab.getElementsByTagName("div"); //数组
for (var i = 0; i < myLi.length; i++) {
myLi[i].index = i;
myLi[i].onclick = function() {
for (var j = 0; j < myLi.length; j++) {
myLi[j].className = "off";
myDiv[j].className = "hide";
}
this.className = "on";
myDiv[this.index].className = "show";
}
}
}
</script>
</head>
<body>
<script type="text/javascript">
function Save() {
document.getElementById("PageOfficeCtrl1").WebSave();
}
function PrintSet() {
document.getElementById("PageOfficeCtrl1").ShowDialog(5);
}
function PrintFile() {
document.getElementById("PageOfficeCtrl1").ShowDialog(4);
}
function Close() {
window.external.close();
}
function IsFullScreen() {
document.getElementById("PageOfficeCtrl1").FullScreen = !document.getElementById("PageOfficeCtrl1").FullScreen;
}
//文档关闭前先提示用户是否保存
function BeforeBrowserClosed(){
if (document.getElementById("PageOfficeCtrl1").IsDirty){
if(confirm("提示:文档已被修改,是否继续关闭放弃保存 ?"))
{
return true;
}else{
return false;
}
}
}
</script>
<!-- HTML页面布局 -->
<div id = "tab">
<ul>
<li class="on">Word文件</li>
</ul>
//这部分是关键two
<div id="firstPage" class="page show">
<%=poCtrl.getHtmlCode("PageOfficeCtrl1")%>
</div>
</div>
</body>
</html>
之后是在线保存的Cltr
@RequestMapping("/savefile/{id}")
//这里是保存的方法,前面的ctrl 里面应该说明了到这里保存的方法
public void savefile(HttpServletRequest request, HttpServletResponse response,
){
try {
FileSaver fs=new FileSaver(request,response);
//这是你原来服务器的文件位置
fs.saveToFile("C:\\temporary\\"+fs.getFileName());
fs.close();
}
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
如果你是用的ie 内核的浏览器现在已经可以完成。chrome内核的话文档说需要POBrowser技术下面介绍一下。怎么使用
其实就是用他内部的事件调用你刚才的方法,使用ie 内核打开。
在你需要事件的地方导入
<script type="text/javascript" src="../../pageoffice.js" id="po_js_main"></script>
//和你的jq很关键!
//你会发现这个pageoffice.js不知道在哪里,那么请复制以下代码
//那么乱,你不需要看,这个会alert 你项目里上面的东西的路径。
<script type="text/javascript" >
function getPageOfficeJsUrl(){var d=document.URL;var c=d.substring(0,find(d,"/",3)+1);var a=d.substring(0,find(d,"/",4)+1);var f=new Array();f[0]=c;f[1]=a;for(var b=0;b<f.length;b++){var e="pageoffice.js";ajax({url:f[b]+"/pageoffice.js",type:"GET",data:{name:"super"},dataType:"json",success:function(h,k){if(d.indexOf("?")>0){d=d.substring(0,d.indexOf("?"))}var g=countChar(d.substring(f[b].length),"/");for(var i=0;i<g;i++){e="../"+e}alert('src="'+e+'"')},fail:function(g){}})}}function countChar(d,e){var b=0;for(var a=0;a<d.length;a++){if(d.charAt(a)==e){b++}}return b}function find(e,b,c){var a=0;for(var d=0;d<c;d++){a=e.indexOf(b,a+1)}return a}getPageOfficeJsUrl();function ajax(a){a=a||{};a.type=(a.type||"GET").toUpperCase();a.dataType=a.dataType||"json";var c=formatParams(a.data);if(window.XMLHttpRequest){var b=new XMLHttpRequest()}else{var b=new ActiveXObject("Microsoft.XMLHTTP")}b.onreadystatechange=function(){if(b.readyState==4){var d=b.status;if(d>=200&&d<300){a.success&&a.success(b.responseText,b.responseXML)}else{a.fail&&a.fail(d)}}};if(a.type=="GET"){b.open("GET",a.url+"?"+c,false);b.send(null)}else{if(a.type=="POST"){b.open("POST",a.url,false);b.setRequestHeader("Content-Type","application/x-www-form-urlencoded");b.send(c)}}}function formatParams(c){var a=[];for(var b in c){a.push(encodeURIComponent(b)+"="+encodeURIComponent(c[b]))}a.push(("v="+Math.random()).replace(".",""));return a.join("&")};
</script>
之后用你知道的onclick 事件调用,超链接啥的也可以。
如果你发现你出现脚本错误之类的,看看你word.jsp的jq有没有导入
//前面一大串的地址就是指向刚才第一个方法,有兴趣你可以回去看一下
POBrowser.openWindowModeless('${ctx_}/pageoffice/index/${diim.id}/${diim.draftFileId}','width=1200px;height=800px;')
最后就是注册的问题你注册玩会生成 license.lic 如果老是频繁注册就复制放入WEB-INF 的lib 目录下即可,如果试用版到期。重新生成一个 license.lic即可。
之后就大功告成。后面的需要根据开发文档在研究研究
如果你看了我的云里雾里那么下面给你两个传送门
https://blog.csdn.net/qq_29897369/article/details/78407111
https://zi-wu-xian.iteye.com/blog/2423276
张小白记录贴,如有错误多多指正~~~
记得按时吃饭!