pdf.js的使用与改造

一、前期准备

1.1 需求描述

1.想让各个浏览器能显示服务器存放的PDF文件（主要是手机的浏览器）

2.想让项目结构如下：lib目录存放pdf.js等依赖文件，src存放要显示的pdf文件

想要的项目结构

3.这样我就可以将这个项目放到我网站的任何目录下，比如放到PDF或者别的文件夹下

PDF目录

1.2 下载pdf.js项目

1.官方下载

点击后会下载zip文件

2.github下载

下拉到这里点zip文件下载

3.下载后将zip解压，可以看到结构如下

解压后目录结构

二、开始修改

2.1 文件移动

1.新建一个PDF目录，在PDF目录中新建src、lib目录

2.将web目录里的所有文件（不包括web这个文件夹）放到PDF下的lib目录中

3.将build这个目录（包括文件夹）放到PDF下的lib目录中

4.将PDF下的lib里的viewer.html剪切到PDF目录下并重命名为index.html

5.最终项目结构如下：

移动文件后目录结构

2.2 文件内容修改

1.修改index.html

原代码

修改为

2.修改viewer.js，目的是为了让其默认在PDF下的src目录中寻找pdf文件

我们找到这一段代码，在sublime中，按“CTRL+F”后搜索‘search’关键字来定位到这段代码

var queryString = document.location.search.substring(1);
var params = (0, _ui_utils.parseQueryString)(queryString);
file = 'file' in params ? params.file : _app_options.AppOptions.get('defaultUrl');

将上面的最后一行代码修改为

file = 'file' in params ? "src/"+params.file : _app_options.AppOptions.get('defaultUrl');//相对于index.html的路径

3.继续修改viewer.js，目的是为了防止pdf.worker.js和pdf.js找不到情况

浏览器报错

在sublime中用“../build”定位到代码段

var pdfjsLib = void 0;
if (typeof window !== 'undefined' && window['pdfjs-dist/build/pdf']) {
  pdfjsLib = window['pdfjs-dist/build/pdf'];
} else {
  pdfjsLib = require('../build/pdf.js');
}

将上面的第5行代码修改为

pdfjsLib = require('lib/build/pdf.js');//这里的路径是相对index.html而言

继续使用“../build”定位到代码段

workerSrc: {
    value: '../build/pdf.worker.js',
    kind: OptionKind.WORKER
}

将第二行代码修改为

value: 'lib/build/pdf.worker.js',//这里的路径是相对index.html而言

三、测试

3.1 将修改好的项目放到服务器，这步是必须的。我把index.html、src目录、lib目录放在了我网站的pdfjs目录。并且将测试用的pdf放入到src文件夹中。

3.2 在本地浏览器输入http://xxx.com/pdfjs/index.html?file=test.pdf

四、修改后的完整代码地址

https://github.com/nbucedog/pdfjs