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:
<
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)
;
.pop
{
position
:
absolute
;
left
:
50%
;
width
:
894px
;
margin-left
:
-447px
;
z-index
:
9
;
</
style
>
<
script
src
="Scripts/pdf.js"
type
="text/javascript"
></
script
>
<
script
type
="text/javascript"
>
function
showPdf() {
var
container
=
document.getElementById(
"
container
"
);
container.style.display
=
"
block
"
;
var
url
=
'
Scripts/jQuery经典入门教程(绝对详细).pdf
'
;
PDFJS.workerSrc
=
'
Scripts/pdf.worker.js
'
;
PDFJS.getDocument(url).then(
function
getPdfHelloWorld(pdf) {
pdf.getPage(
1
).then(
function
getPageHelloWorld(page) {
var
scale
=
1
;
var
viewport
=
page.getViewport(scale);
var
canvas
=
document.getElementById(
'
the-canvas
'
);
var
context
=
canvas.getContext(
'
2d
'
);
canvas.height
=
viewport.height;
canvas.width
=
viewport.width;
var
renderContext
=
{
canvasContext: context,
viewport: viewport
page.render(renderContext);
</
script
>
</
head
>
<
h1
><
a
href
="javascript:void(0)"
target
="_blank"
onclick
="showPdf()"
>
显示pdf文档
</
a
></
h1
>
<
div
id
="container"
style
="display: none;"
>
<
div
class
="lightbox"
></
div
>
<
div
id
="pop"
class
="pop"
>
<
canvas
id
="the-canvas"
></
canvas
>
</
div
>
</
div
>
</
body
>
</
html
>
demo2:
<
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
>
<
li
><
a
href
="Scripts/jQuery经典入门教程(绝对详细).pdf"
target
="pdfContainer"
onclick
="showPdf(true)"
>
0001_pdf
</
a
></
li
>
<
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
>
项目架构：
转自：https://www.cnblogs.com/xiangliuyunyang/p/5956453.html
