Pdf.js在线预览不同的pdf文件

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

Pdf.js在线预览不同的pdf文件

猜你喜欢