Web 应用（SSH） + 在线编辑PageOffice 的入门级开发word 在线编辑

最新推荐文章于 2024-06-21 10:37:31 发布

你给我翻译翻译什么叫牛牛牛的代码

最新推荐文章于 2024-06-21 10:37:31 发布

阅读量1.4k

点赞数 1

分类专栏： web前端文章标签： pageOffice word集成web office 前端java jsp

本文链接：https://blog.csdn.net/zdreamLife/article/details/88999416

版权

web前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

最近一个需求在网页上编辑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

张小白记录贴，如有错误多多指正~~~

记得按时吃饭！

你给我翻译翻译什么叫牛牛牛的代码

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Web 应用（SSH） + 在线编辑PageOffice 的入门级开发word 在线编辑

最近一个需求在网页上编辑word文档，网上看了看就是PageOffice比较简单实用。先来个官网的demo下载地址http://www.zhuozhengsoft.com/dowm/根据它的描述可以轻松的运行起来首先环境配置web.xml里先加上 <servlet> <servlet-name&g...
复制链接

扫一扫

专栏目录