感谢 https://blog.csdn.net/itbiggod/article/details/80279208
能够实现 “jsp实现在线预览pdf、word、xls、ppt等文件”,很全,目前正在一个个验证中,如果没问题,我会追加注意细节
案例都是js端实现的,目前只测试了pdf(word、excel等没测试)。后面会把源码地址附上
我按照上面博主的方式分别编写测试用例验证可行性(也多亏了以为同事的帮忙):
方式1:(简单,略),不考虑这种方式,在线预览要求用户必须点击一下 ,才可实现,不符合业务要求
方式2:通过jquery插件jquery.media.js实现
<!DOCTYPE html>
<html>
<head>
<title>xx</title>
<script type="text/javascript" src="../UI/jquery.min.js"></script>
<script type="text/javascript" src="../UI/jquery.media.js"></script>
</head>
<body>
<div id="open5d_handout_wrap_inner"></div>
</body>
<script type="text/javascript">
$(function(){
//$('#open5d_handout_wrap_inner').media({ width: '100%', height: '100%', autoplay: true, src:url});
$('#open5d_handout_wrap_inner').media({
//实现发现100%不管用,必须写具体数据
width: '100%',
height: 1000,
autoplay: true,
src: 'http://localhost:8080/a/1.pdf'
});
});
方式3:直接使用iframe标签
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>Insert title here</title>
<script type="text/javascript" src="../UI/jquery.min.js"></script>
</head>
<body>
<!-- 100%比例没啥卵用,只能用具体数值 -->
<iframe id="pdf_page" name="pdf_page" style="width: 100%; height: 1000px"> </iframe>
<script type="text/javascript">
var url = "http://localhost:8080/a/1.pdf";
$('#pdf_page').attr("src", url);
</script>
</body>
</html>
方式4:<embed>标签
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>open5d</title>
</head>
<body style="width:100%;height:100%;padding:0;margin:0;overflow:hidden;" >
<!-- width=100%;height:100%;无效 -->
<embed src="<%=newUrl %>" type="application/pdf" width="1000px" height="1000px">
</body>
</html>
方式5:<<object>标签
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>xx</title>
</head>
<body>
<div class="pdf">
<object data="http://localhost:8080/a/1.pdf" type="application/pdf" width="100%" height="1000px">
<p>抱歉,您的浏览器不支持PDF预览,请点击链接下载PDF文件<a href="<%=newUrl %>"></a></p>
</object>
</div>
</body>
</html>
方式6:PDFobject.js 插件
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>PDFObject</title>
<style type="text/css">
html, body, #pdf_viewer {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
<script type="text/javascript" src="js/pdfobject.min.js"></script>
</head>
<body>
<div id="pdf_viewer"></div>
</body>
<script type="text/javascript">
if(PDFObject.supportsPDFs){
// PDF嵌入到网页
PDFObject.embed("http://localhost:8080/a/1.pdf", "#pdf_viewer");
} else {
location.href = "/canvas";
}
</script>
</html>
方式7 :pdf.js 插件 (需要pdf.js 和pdf.worker.js)
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.lightbox{
position: fixed;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
z-index: 7;
opacity: 0.3;
display: block;
background-color: rgb(0, 0, 0);
}
.pop{
position: absolute;
left: 50%;
width: 894px;
margin-left: -447px;
z-index: 9;
}
</style>
<script src="js/pdf.js" type="text/javascript"></script>
</head>
<body>
<div id="id_onlineViewPdf_27" style="display: none;">
<div class="lightbox"></div>
<div id="pop" class="pop">
<canvas id="the-canvas"></canvas>
</div>
</div>
</body>
<script type="text/javascript">
showPdf();
function showPdf() {
var container = document.getElementById("id_onlineViewPdf_27");
container.style.display = "block";
var url = 'http://localhost:8080/a/1.jsp';
PDFJS.workerSrc = 'js/pdf.worker.js';
PDFJS.getDocument(url).then(function getPdfHelloWorld(pdf) {
pdf.getPage(1).then(function getPageHelloWorld(page) {
var scale = 1;
var viewport = page.getViewport(scale);
var canvas = document.getElementById('the-canvas');
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
var renderContext = {
canvasContext: context,
viewport: viewport
};
page.render(renderContext);
});
});
}
</script>
</html>
附上所有涉及js插件的打包: