之前写过一篇推文是在线预览的,但是使用的是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的方法中获取上面传的值即可。