pdf.js是PDF在线浏览插件,使用方法如下:
一、下载pdf.js
1.官网下载地址(推荐):https://mozilla.github.io/pdf.js/
2.github下载地址:https://github.com/mozilla/pdf.js
3.使用git克隆到本地:
$ git clone https://github.com/mozilla/pdf.js.git
$ cd pdf.js
备注:github下载的文件不全,解压出错,git速度很慢,所以选择从官网直接下载压缩包最快!
二、pdf.js使用示例:
1.从官网下载为例:
https://mozilla.github.io/pdf.js/
当前为稳定版2.5.207,点击直接下即可。
选择Prebuilt (ES5-compatible) 下Stable(稳定版)2.5.207
下载解压pdfjs-2.5.207-es5-dist.zip,可以看到有build和web两个文件夹,
文件目录如下:
├── build/
│ ├── pdf.js - display layer
│ ├── pdf.js.map - display layer's source map
│ ├── pdf.worker.js - core layer
│ └── pdf.worker.js.map - core layer's source map
├── web/
│ ├── cmaps/ - character maps (required by core)
│ ├── compressed.tracemonkey-pldi-09.pdf - PDF file for testing purposes
│ ├── debugger.js - helpful debugging features
│ ├── images/ - images for the viewer and annotation icons
│ ├── locale/ - translation files
│ ├── viewer.css - viewer style sheet
│ ├── viewer.html - viewer layout
│ ├── viewer.js - viewer layer
│ └── viewer.js.map - viewer layer's source map
└── LICENSE
打开web下的viewer.html,你会发现PDF文件在浏览器中并没有加载显示,是的插件是需要上传至服务器才可以正常运行,在本地搭建环境或直接上传到服务器。
2.下面以上传至服务器为例:
重命名pdfjs-2.5.207-es5-dist文件为pdfjs,压缩上传至服务器项目目录下,解压后,通过链接地址打开,PDF文件正常显示:
http://www.abc.com/pdfjs/web/viewer.html
打开viewer.js,将以下代码中value值compressed.tracemonkey-pldi-09.pdf修改为自己的pdf文件名,比如,demo.pdf或
http://www.abc.com/pdfjs/web/demo.pdf
defaultUrl: {
value: "compressed.tracemonkey-pldi-09.pdf",
kind: OptionKind.VIEWER
},
再次打开链接:http://www.abc.com/pdfjs/web/viewer.html
你的PDF文档已正常加载。
如加载多个PDF文件,将value值留空即可:
defaultUrl: {
value: "",
kind: OptionKind.VIEWER
},
然后把url改写为参数传值?file=01.pdf:
http://www.abc.com/pdfjs/web/viewer.html?file=01.pdf //第一个文档
http://www.abc.com/pdfjs/web/viewer.html?file=02.pdf //第二个文档
http://www.abc.com/pdfjs/web/viewer.html?file=03.pdf //第三个文档
…
备注:当你的PDF文件没有上传至WEB目录下时留意路径。