pdf.js的编译部署和简单示例

pdf.js是实现浏览器上展示和操作PDF文件的库，功能非常的强大。

一、下载pdf.js源码并编译
首先我们到其官网https://github.com/mozilla/pdf.js，点击github project按钮在github中下载源码包pdf.js-master.zip。
既然获得源码了，第一步自然是看readme喽。在readme中我们得知要编译pdf.js我们需要先安装node.js和npm，node.js去官网下载安装包直接双击安装就好了。至于npm在window下稍微麻烦些具体安装过程我就不赘述了给个链接http://www.infoq.com/cn/articles/nodejs-npm-install-config/。
接下来我们在git 命令行中进入pdf.js源码目录中运行

$ npm install -g -gulp-cli
$ npm install -g gulp
$ npm install
$ gulp server

然后我们就可以打开浏览器输入地址http://localhost:8888/web/viewer.html这样我们就可以预览到pdf文件了。

没问题的话我们就可以编译pdf.js了，只需要运行

$ gulp generic

就会在源码目录下生成一个build文件夹，里面有个generic文件夹就是我们编译好的pdf.js了。注意这是适合pc浏览的编译版本，后面还会说到对移动端支持较好的mobile版本(作者们还真是贴心呢,感谢感谢)。
拿到编译好的东西大家肯定迫不及待想要试试效果了，我们可以看到该目录下还有两个文件夹，分别是build和web文件夹,build下就是我们核心需要使用的pdf.js和pdf.worker.js两个文件了，而web目录下就是作者给我们做好的一个viewer页面和其配套的资源了。我们将整个generic文件夹拷到一个可运行的web服务器下，访问到viewer.html就可以得到如下图这样精美的pdf浏览器了。

接下来我们再编译下mobile版本的吧，很简单只需要运行如下代码:

$ gulp dist

等待运行结束，build目录下会出现很多文件夹我们先不管他。在web服务器下新建mobile文件夹，把build文件夹下的dist文件夹拷到该目录，然后再把源码目录下examples\mobile-viewer中所有文件都拷到该目录下得到如下图目录结构：
这里写图片描述

里面的pdf文件是用来测试的，大家随便放两个进去就好。接下来为了能够使用我们修改下viewer.html :

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

  <title>PDF.js viewer</title>
  //其实就是改依赖文件的路径，让浏览器能找到
  <link rel="stylesheet" href="dist/web/pdf_viewer.css">
  <link rel="stylesheet" type="text/css" href="viewer.css">

  <script src="dist/build/pdf.js"></script>
  <script src="dist/web/pdf_viewer.js"></script>

  <script src="viewer.js"></script>
</head>

还有viewer.js

PDFJS.useOnlyCssZoom = true;
PDFJS.disableTextLayer = true;
PDFJS.maxImageSize = 1024 * 1024;
PDFJS.workerSrc = 'dist/build/pdf.worker.js';
PDFJS.cMapUrl = 'dist/cmaps/';
PDFJS.cMapPacked = true;

var DEFAULT_URL = 'signed.pdf';//这边就看你放的文件了

然后我们使用浏览器打开viewer.html就可以看到适应移动端的界面了：

频道导航

pdf.js的编译部署和简单示例

您可能感兴趣的文章: