之前写过一篇推文是在线预览的,但是使用的是jquery.media.js,但是发现火狐浏览器的展示有问题,虽然换成pdf.js后也是有问题,但是也算是玩了一下pdf.js。关于pdf.js是怎么用的相信大把的推文。我这里只是介绍一下怎么预览特定的文件,是自己可以选的,而不是很多推文中的写死的。因为大部分场景肯定是根据参数的值来展示不同的pdf文件。
1、正常我们的思维肯定是下面的写法,就是直接在方法后面带参数。
<iframe src="<c:url value="plug-in-5u/js/pdf/web/viewer.html" />?file=<%=basePath %>/baseFileInfoController.do?viewPdf&filePath=${filePath}"
width="100%" height="800px"></iframe> --%>
但是你断点调试会发现,这样子是传不过去的,永远拿到的只能是null
2、但是你可以这么搞
我们可以把file形参的值,先编码,然后再解码来解决这个问题!
此时,就可以请encodeURIComponent()函数出场了!因为其为js函数,所以需要在页面初始化时动态为iframe设置src的值:
<script type="text/javascript">
$(function(){
var filePath = "${filePath}"; //我这里的文件路径是点击预览的时候传过来的,是pdf文件的路径
var url ="<%=basePath%>/baseFileInfoController.do?viewPdf&filePath="+filePath;
$("#displayPdfIframe").attr("src",'<c:url value="plug-in-5u/js/pdf/web/viewer.html" />?file=' + encodeURIComponent('<c:url value="'+url+'"/>'));
});
</script>
</head>
<body>
<iframe id="displayPdfIframe" width="100%" height="800"></iframe>
</body>
</html>
那么好了,你竟然为url编码了,那么肯定也要有解码吧。不过不用担心,在web目录下的viewer.js中有一个方法叫parseQueryString,这里已经解码了,所以我们不需要做什么。
function parseQueryString(query) {
var parts = query.split('&');
var params = Object.create(null);
for (var i = 0, ii = parts.length; i < ii; ++i) {
var param = parts[i].split('=');
var key = param[0].toLowerCase();
var value = param.length > 1 ? param[1] : null;
params[decodeURIComponent(key)] = decodeURIComponent(value);
}
return params;
}
3、在Controller的方法中获取上面传的值即可。