因项目需要在浏览器上展示和操作PDF文件，在查找相关库后决定先学习下pdf.js。
一、下载pdf.js源码并编译
首先我们到其官网http://mozilla.github.io/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就可以看到适应移动端的界面了：
1341
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
