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

2022-04-17 22:55:52

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的使用）。