一、前期准备

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

原代码

<link rel="stylesheet" href="viewer.css">
<link rel="resource" type="application/l10n" href="locale/locale.properties">
<script src="../build/pdf.js"></script>
<script src="viewer.js"></script>

修改为

<link rel="stylesheet" href="lib/viewer.css">
<link rel="resource" type="application/l10n" href="lib/locale/locale.properties">
<script src="lib/build/pdf.js"></script>
<script src="lib/viewer.js"></script>

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