pdf.js最新使用方法示例

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目录下时留意路径。

猜你喜欢

转载自blog.csdn.net/itbrand/article/details/108677676