pdf.js 使用实例（app直接预览pdf格式的文档）

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

pdf.js可以实现在html下直接浏览pdf文档，是一款开源的pdf文档读取解析插件

pdf.js主要包含两个库文件，一个pdf.js和一个pdf.worker.js，，一个负责API解析，一个负责核心解析

下载地址：http://cnblogs.com/files/xiangliuyunyang/build.zip

两个主要demo

1.点击连接读取第一页的pdf文档：http://www.51purse.com/pdf/web/demo1.html（此处没有自己上传）

2.点击连接，选择需要打开的文件，进行pdf预览：http://www.51purse.com/pdf/web/demo2.html（此处没有自己上传）

参考代码：

demo1:

1 <html>
2 <head>
3 <meta charset="UTF-8">
4 <title>Document</title>
5 <style type="text/css">
6 .lightbox{
7 position: fixed;
8 top: 0px;
9 left: 0px;
10 height: 100%;
11 width: 100%;
12 z-index: 7;
13 opacity: 0.3;
14 display: block;
15 background-color: rgb(0, 0, 0);
16 }
17 .pop{
18 position: absolute;
19 left: 50%;
20 width: 894px;
21 margin-left: -447px;
22 z-index: 9;
23 }
24 </style>
25 <script src="Scripts/pdf.js" type="text/javascript"></script>
26 <script type="text/javascript">
27 function showPdf() {
28 var container = document.getElementById("container");
29 container.style.display = "block";
30 var url = 'Scripts/jQuery经典入门教程(绝对详细).pdf';
31 PDFJS.workerSrc = 'Scripts/pdf.worker.js';
32 PDFJS.getDocument(url).then(function getPdfHelloWorld(pdf) {
33 pdf.getPage(1).then(function getPageHelloWorld(page) {
34 var scale = 1;
35 var viewport = page.getViewport(scale);
36 var canvas = document.getElementById('the-canvas');
37 var context = canvas.getContext('2d');
38 canvas.height = viewport.height;
39 canvas.width = viewport.width;
40 var renderContext = {
41 canvasContext: context,
42 viewport: viewport
43 };
44 page.render(renderContext);
45 });
46 });
47 }
48 </script>
49 </head>
50 <body>
51 <h1><a href="javascript:void(0)" target="_blank" onclick="showPdf()">显示pdf文档</a></h1>
52 <div id="container" style="display: none;">
53 <div class="lightbox"></div>
54 <div id="pop" class="pop">
55 <canvas id="the-canvas"></canvas>
56 </div>
57 </div>
58 </body>
59 </html>

demo2:

<html>
<head>
<meta charset="UTF-8">
<title>Document</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>