pdf.js框架的魅力所在，为其为HTML5实现的，无需任何本地支持，而且对浏览器的兼容性也是比较好，要求只有一个：浏览器支持HTML5就好了！（不过对于低版本的IE，就只能节哀了！）
据说IE9以上是OK的，因为我本地是IE11，所以我只在IE11上测试过，是通过的（当然火狐，360，我也测了一下，是可以的）。
因为项目开发需要，在线展示PDF，而且要兼容IE，所以就选择了pdf.js，但是网上对他的教程很少，我花了一天时间才搞定，回头看了一下，也没有想象中那么困难，所以决定写一篇博客，以便大家参考！
以下是pdf.js相关的网址：
GitHub: https://github.com/mozilla/pdf.js/
上面这个网址，有pdf.js的基本简介，以及如何获取源码，之后如何进行构建！
获取源码使用（首先要先装Git【点击->安装过程回顾】）：
当然，既然有编码，那么就一定要有解码来解析他，不过这个工作generic/web/viewer.js已经替我们做过了，如下所示：
据说IE9以上是OK的，因为我本地是IE11，所以我只在IE11上测试过，是通过的（当然火狐，360，我也测了一下，是可以的）。
因为项目开发需要，在线展示PDF，而且要兼容IE，所以就选择了pdf.js，但是网上对他的教程很少，我花了一天时间才搞定，回头看了一下，也没有想象中那么困难，所以决定写一篇博客，以便大家参考！
以下是pdf.js相关的网址：
GitHub: https://github.com/mozilla/pdf.js/
上面这个网址，有pdf.js的基本简介，以及如何获取源码，之后如何进行构建！
获取源码使用（首先要先装Git【点击->安装过程回顾】）：
$ git clone git://github.com/mozilla/pdf.js.git$ node make generic其实，我们使用pdf.js，最终只需要构建后的内容，大家可以通过这里进行下载：
我整合好的js
【点击下载->build.rar】
下面我就介绍下，具体嵌入项目中是如何运用的！
可以把generic中的内容作为第三方插件进行使用，在项目中可以像如下存放：
我是放在plugins下的，把generic下的build和web、LICENSE都复制过来
项目架构：
http://localhost:8080/TestWeb/resources/plugins/pdfJs/web/viewer.htmll?file=【?】.pdf
【?】问号是输入pdf的所在的位置
页面代码如下：
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!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</title>
</head>
<body>
<iframe id="displayPdfIframe" width="100%" height="800"
src="<c:url value="/resources/plugins/pdfJs/web/viewer.html" />?file=<c:url value="/resources/pdf/1.pdf"/>">
</iframe>
</body>
</html>
显示效果：
这就可以在线阅读pdf了，是不是很简单！
Ps：
我们在实际应用中，可能会根据不同的参数，来选择展示不同的pdf文件，此时就涉及到传参的问题了，仔细观察上面这段url地址会发现，在file请求参数中的值为一个url地址，而这个url地址又追加了自己的请求参数，这就导致一个url地址中出现2个"?"
导致浏览器不能正常解析这段url！
一种解决思路是：我们可以把file形参的值，先编码，然后再解码来解决这个问题！
此时，就可以请encodeURIComponent()函数出场了！因为其为js函数，所以需要在文档就绪函数中动态为iframe设置src的值，如下所示：
<%@ page contentType="text/html;charset=utf-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<script type="text/javascript">
$(function(){
$("#displayPdfIframe").attr("src",'<c:url value="/resources/plugins/pdfJs/web/viewer.html" />?file=' + encodeURIComponent('<c:url value="/showPDF.do?id=${id}"/>'));
});
</script>
<div class="ctrlDiv">
<div class="eleContainer elePaddingBtm">
<iframe id="displayPdfIframe" width="100%" height="100%"></iframe>
</div>
</div> 当然，既然有编码，那么就一定要有解码来解析他，不过这个工作generic/web/viewer.js已经替我们做过了，如下所示：
至此，pdf.js插件的介绍就告一段落了，如有不懂，大家可以加我们的技术群，谢谢！
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
