pdf.js学习笔记

来源：互联网发布：淘宝童装一件代理货源编辑：程序博客网时间：2024/06/05 11:04

因项目需要在浏览器上展示和操作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就可以看到适应移动端的界面了：
这里写图片描述

0 0