jsp在线预览pdf和word文件(在浏览器中预览pdf文件和Word文件)

相关jar包和插件的下载地址：在线浏览pdf的插件

在浏览器中预览pdf文件和Word文件，下载完这些插件，导入到自己项目中，至于导入到哪个目录，web.xml中需要配置什么，在下载的文档中有具体的文档说明，按照文档中的步骤去配置就好了！

我们先看看效果图：后面直接上代码！

直接上代码！

pdfAndWord.jsp页面

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ page language="java" import="com.zhuozhengsoft.pageoffice.*" %>
<%
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort();
System.out.println("====================" + basePath + "====================");
request.setAttribute("basePath", basePath);
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>在浏览器中预览pdf文件和Word文件</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/body.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/mark.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/console.css">
<!-- includeMoreJS.js文件中引入了其他多个js文件 -->
<script type="text/javascript" src="${pageContext.request.contextPath}/js/includeMoreJS.js" charset="utf-8"></script> 
	
<!-- 
加入了pageoffice这个word插件之后，可以在浏览器的控制台中看到，会自
动的不断地向服务器(GET http://127.0.0.1:57070/func2.htm?x=CB204D18&parent=C52B3A8B13C6C28FFCFBB93D5F4A5080)发送请求
,为什么会这样，具体的原理和执行过程我没去深究!
-->

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

<script type="text/javascript">

	function getImgPath() {
		alert("hi 江西省赣州市于都县渡江大道XXXX号");
		return "img/004.gif";
	}
	
// 	getImgPath();
</script>

<style type="text/css">
* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

body {
margin: 0;
background: url(javascript:alert("江西省赣州市于都县"));
background: url(javascript:getImgPath());
/* background-image: url("img/1.jpg"); */
background: url("img/12.jpg");

/*

background-image: url("${pageContext.request.contextPath}");

*/
}

</style>
</head>
<body>
<center>
<div style=" text-align:center; background-color:#CD0000; padding:8px;width: 100%;border-radius: 0px;">
<h1 style="color: white;">在浏览器中预览pdf文件和Word文件</h1>
</div>
加入了pageoffice这个word插件之后，可以在浏览器的控制台中看到，会自
动的不断地向服务器(GET http://127.0.0.1:57070/func2.htm?x=CB204D18&parent=C52B3A8B13C6C28FFCFBB93D5F4A5080)发送请求
,为什么会这样，具体的原理和执行过程我没去深究!
<br/>
<input type="button" value="在线预览pdf文件" onclick="openPDF()">
<br/>
<a href="pdfjs/web/viewer.html?file=${pageContext.request.contextPath}/pdf/01Java简介.pdf" target="_blank">
在线预览pdf1
</a><br/>
<a href="pdfjs/web/viewer.html?file=${pageContext.request.contextPath}/pdf/02开发工具Eclipse.pdf" target="_blank">
在线预览pdf2
</a><br/>
<a href="pdfjs/web/viewer.html?file=${pageContext.request.contextPath}/pdf/02Servlet详解.pdf" target="_blank">
在线预览pdf3
</a><br/>
<a href="pdfjs/web/viewer.html?file=${pageContext.request.contextPath}/pdf/02Servlet详解_JavaWeb.pdf" target="_blank">
在线预览pdf4
</a><br/>

<a href="${pageContext.request.contextPath}/pdf/03JSP基础.pdf" target="_blank" style="background-color: #CD0000;">
在线预览pdf5(普通写法)
</a><br/><br/>

<a href="javascript:POBrowser.openWindowModeless('word.jsp?name=jack&age=12','width=1200px;height=800px;', '令狐冲');" style="background-color: #008B45;">
在线打开Word(使用非模态框打开文件)，传递了参数，用了2种方式传递参数(第1种用了?号的方式传递参数，第2种用了UserParams方式传递)
</a>
<br/>
<a href="javascript:POBrowser.openWindow('word.jsp?name=lay&age=26','width=600px;height=400px;', '杨过');" style="background-color: #008B45;">
web系统中预览Word文件(使用模态框打开文件)，传递了参数，用了2种方式传递参数(第1种用了?号的方式传递参数，第2种用了UserParams方式传递)
</a>
<br/>
<a href="<%=PageOfficeLink.openWindow(request, "word.jsp?name=jerry&age=19","width=800px;height=800px;")%>" style="background-color: #008B45;">
在线预览Word文件，传递了参数，这里只用了?号的方式传递参数
</a>
<br/>
<h4>将其他页面的jsp地址嵌入到script标签的src属性中来实现IP地址的查找</h4>
<!-- 将其他页面的jsp地址嵌入到script标签的src属性中来实现IP地址的查找 -->
<script type="text/javascript" src="${requestScope.basePath}/javaWeb/jstl.jsp"></script>
<h4>web服务器借助img标签收集其他web站点的页面访问次数</h4>
<img title="web服务器借助img标签收集其他web站点的页面访问次数" src="${requestScope.basePath}/javaWeb/jstl.jsp">
<br/>
<h2>1、web服务器借助img标签来收集其他web站点的页面访问次数</h2>
<h2>2、将其他页面的jsp地址嵌入到script标签的src属性中来实现IP地址的查找</h2>
<h2>3.使用script标签的src属性为其他站点的网页提供各种拓展功能。
(比如可以连接到后台动态页面处理数据)</h2>
</center>
</body>

 <!-- 百度统计、通过把以下代码添加进页面来统计PV和UV -->
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "//hm.baidu.com/hm.js?d7969022f16f77bcd4dcca3547bfac7e";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>


<script type="text/javascript">

debug("一个js文件中引入其他多个js文件");

//在线预览pdf文件
function openPDF(){
    var url = "${pageContext.request.contextPath}" + "/pdf/java编程思想.pdf";
    window.open("pdfjs/web/viewer.html?file=" + url);
}

// window.onload = function (){
// 	var pageOfficeNode = document.getElementById("PageOfficeCtrl1");
// 	var divNodes = pageOfficeNode.getElementsByTagName("div");
// 	var aNodes = divNodes[0].getElementsByTagName("a");
// 	aNodes[0].style.color = "#CD0000";
// 	aNodes[0].style.fontWeight = "bold";
// }


//如果是在onload事件中写的话，script节点的数量要比原来少一个
// 	window.onload = function() {
		var scriptNodes = document.getElementsByTagName("script");
		debug("script节点的数量=" + scriptNodes.length);
		for (var index = 0; index < scriptNodes.length; index++) {
			debug("=======" + scriptNodes[index].src);
		}

// 	}


</script>

</html>

word.jsp页面

<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ page language="java" import="com.zhuozhengsoft.pageoffice.*"%>

<%
	PageOfficeCtrl poCtrl = new PageOfficeCtrl(request);
	//设置服务器页面
	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("SaveFile.jsp");
	//打开Word文档
// 	"G:\\workspace2016-04-03\\xml\\WebContent\\doc\\PageOffice.doc"
// 	poCtrl.webOpen(request.getContextPath() + "/doc/PageOffice.doc", OpenModeType.docNormalEdit, "张三");
	poCtrl.webOpen("G:\\workspace2016-04-03\\xml\\WebContent\\doc\\PageOffice.doc", OpenModeType.docNormalEdit, "张三");
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

body {
margin: 0;
}
</style>

<title>在线预览word文件</title>
</head>
<body>
	<center>
		<div style=" text-align:center; background-color:#0000AA; color:White; padding:8px;width: 100%;height: 80px;">
		<h1>在线预览word文件</h1>
		</div>
		<span style="color: #CD0000;">
		从上一个页面传递过来的参数name=${param.name} / age=${param.age}
		父页面传递过来的参数<input type="text" id="pageParam" value="" style="border: 2px solid #CD0000;">
		</span>
		<div style="height: 400px;">
		<%=poCtrl.getHtmlCode("PageOfficeCtrl1")%> 
		</div>
	</center>
</body>

<script type="text/javascript">
//alert("文本框中的值=" + document.getElementById("pageParam").value);
</script>

<script type="text/javascript">

	//获取父页面传递过来的参数
	function getPageParam() {
		document.getElementById("pageParam").value = window.external.UserParams;
	}

	window.onload = function() {
		getPageParam();
	}
</script>

<script type="text/javascript">
//alert("文本框中的值=" + document.getElementById("pageParam").value);
</script>

</html>

jsp在线预览pdf和word文件(在浏览器中预览pdf文件和Word文件)

猜你喜欢