PDF.Js的使用—javascript中前端显示pdf文件

PDF.Js的使用—javascript中前端显示pdf文件

写于2018/12/6

起因是一个图片展示页面需要展示pdf格式的文件，所以查了半天决定使用pdf.js，我也不求有多了解它，能实现我想要的效果就行，但至少到了最后我让它的demo跑了起来。

网上很多教程要么不全，要么就是很杂很深又不靠谱，因为我不怎么想了解它是用什么框架完成的，怎么make的，我只想要在前端引入js并能展示pdf，所以很多看不下去，但是获得pdf.js之前还是需要进行一些配置，大致的配置过程如下吧。

1、 取得pdf.js文件中的build

<1>从git下载pdf.js

　　

git clone git://github.com/mozilla/pdf.js.git

或者直接从https://codeload.github.com/mozilla/pdf.js/zip/master下载

但是：这个文件夹里面是没有build文件夹的（虽然查到一大堆教程开口就是我们可以看到一个文件夹build……），目录如下——但是如果你下载的版本是有build文件的，那就跳过下文，进行2

<2>生成build文件——命令行在pdf.js的根目录下输入：

　　gulp server

　　 gulp generic（需要先安装）

a.安装gulp

　　生成build文件需要gulp，我不知道这是什么，但是如果你输入上述两个命令成功了，那就恭喜你获得build文件夹了，如果没有，跟着安装吧

• 　　先安装node.js

　　 https://nodejs.org/en/download/

　　使用node –v有输出版本那说明你电脑里已经安装了

• 　　再：

　　　　

npm install -g gulp-cli

npm install  gulp

　　　　输入 gulp –v，输出如下就应该可以了

　　　　 

• 　　最后：

　　

　　gulp server

　　gulp generic

b.遇到过的错误 Task function must be specified

　　

如上错误，网上有两种说法：1、cli和local版本不一致即在pdf.js下输入gulp –v得到的两个版本号不一致。2、是gulp4不兼容gulp3，在某些地方的写法在gulp4中是不对的写法。

我的cli和local版本的确不一致（这个后面看网上某些说明好像并没有问题），还有pdf.js可能是gulp3写的，所以我直接将两个版本都变成一致的gulp3。命令

　　　　npm install gulp@3 –g

　　　　npm install --save--dev gulp@3

2、 引用build文件夹中的文件进行前端html和js的构建

<1>网页运行环境

　　如果直接双击打开某个demo的html，在console会报错，并提示你只能通过http访问。如果你是大神应该懂了，如果像我那么傻过就看下去。只能通过http访问，即是使得你的访问方式是http://127.0.0.1:端口号/xxx,或者http://localhost:端口号/xxx，当然在那之前你要运行某个服务器，比如说Tomcat、Django、node.js、Vue等等。要用的话了解一下这些吧，我并没有发现更简单的方式。虽然没怎么用过，但是仅用于学习的话，node.js应该是最简单的方式。

由于我之前用的就是Django，那就直接使用了。

<2>pdf.js,viewer.html

　　运行gulp后我生成的build如下f图一所示，generic/build之中比较重要的是build文件夹和web文件夹，如图二所示，build文件夹中包含了主要的pdf.js和pdf.worker.js，而web文件夹中包含了viewer.html，是一个比较有用的网页，下文将会提到。在这里，你需要知道的是，无论在example文件中的demo引用的还是你自己网页引用的都是build文件夹（根目录下的那个）中的文件，就我现在而言，其他的文件并没有什么用（除了用于生成build和学习pdf.js—example的使用）。

<3>viewer.html

通过http直接访问到viewer.html，你会得到下图所示的网页——一个完整的，包含大部分操作的网页。（如果其中有引用的js,css出错，根据你使用的框架的特点，看着console改吧）。

而如果你想要展示自己的pdf，则使用

.        …./viewer.html?file=xxx/xxx/xxx.pdf

而你想要直接查看效果，官网有demo，网址如下：

http://mozilla.github.io/pdf.js/web/viewer.html

而你想向官网传入自己的pdf……好像pdf必须存在某个开放的服务器上

<4>自己在网页中添加

由于viewer.html完美解决了我的问题，这个部分只是稍微了解了一下。

首先PDFJS is not define!我也不知道为什么一大堆教程用的都是PDFJS，但是这个分明不能用了呀！可以查看pdf.js中的example代码来学习，最简单的是learning文件夹中的hello world。

参考地址

https://www.cnblogs.com/iPing9/p/7154753.html

https://www.jianshu.com/p/40b99bed3127

https://www.cnblogs.com/iPing9/p/7154753.html

http://mozilla.github.io/pdf.js/