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

本文轉載自查看原文 2019-01-15 14:58 4913 前端總結

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