一、前期准备
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而言
