在很早之前就想实现一个pdf在线预览的功能，只是限于流量和对服务器性能要求较高作罢。现在本文将其中涉及的到关键技术共享给大家。
pdf.js 插件介绍
pdf.js可以实现在html下直接浏览pdf文档，是一款开源的pdf文档读取解析插件。官方地址：http://mozilla.github.io/pdf.js/
pdf.js主要包含两个库文件，一个pdf.js和一个pdf.worker.js，，一个负责API解析，一个负责核心解析。
下面是 pdf.js 插件结构图
pdf.js 制作 pdf文档在线阅读功能
首先我们需要将 pdf.js 从官网上下载下来。然后项目，在项目中放置一个待预览的pdf文档，同时将pdf.js 复制到项目中。新建一个index.html文件。内容如下：
<html>
<head>
<meta charset="UTF-8">
<title>：www.xttblog.com pdf在线预览</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);
display: none;
}
.pop,iframe{
position: absolute;
left: 50%;
top:0;
width: 893px;
height: 100%;
margin-left: -446.5px;
z-index: 9;
}
</style>
<script src="Scripts/pdf.js" type="text/javascript"></script>
<script type="text/javascript">
function showPdf(isShow) {
var state = "";
if (isShow) {
state = "block";
} else {
state = "none";
}
var pop = document.getElementById("pop");
pop.style.display = state;
var lightbox = document.getElementById("lightbox");
lightbox.style.display = state;
}
function close() {
showPdf(false);
}
</script>
</head>
<body>
<ul>
<li><a href="Scripts/jQuery经典入门教程(绝对详细).pdf" target="pdfContainer" onclick="showPdf(true)">0001_pdf</a></li>
</ul>
<div class="lightbox" id="lightbox"></div>
<div id="pop" class="pop" style="display: none;">
<a href="javascript:close()" style="
position: absolute;
right: -90px;
display: inline-block;
width: 80px;
height: 30px;
" id="close">关闭</a>
<iframe src="" frameborder="0" id="pdfContainer" name="pdfContainer"></iframe>
</div>
</body>
</html>
项目结构如下图所示：
项目运行效果
点击查看运行效果：http://mozilla.github.io/pdf.js/web/viewer.html
注意：如果遇到无法阅读的情况，请按下图操作。
： » 详解 使用pdf.js 插件实现pdf文档在线浏览功能
原创文章，作者：1402239773，如若转载，请注明出处：https://blog.ytso.com/tech/aiops/251205.html