pdf.js的使用与改造
2019-04-03 本文已影响0人
宁大通信狗
一、前期准备
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而言
