如何在vue中使用pdfjs預覽pdf文件

更新時間：2021年06月17日 08:50:02 作者：土家肸哥

本文主要講解了如何在vue中使用pdfjs預覽pdf文件，這樣的優(yōu)勢是無須讓用戶安裝專門的軟件即可實現(xiàn)預覽，下面就看看如何實現(xiàn)這個需求

前言

在寫項目的過程中，偶爾會有使用到pdf的文件，當我們想看pdf文件的時候，你的操作是不是先把pdf文件下載下來，通過電腦安裝的專用于打開pdf的軟件來查看pdf文件呢。如果有個需求說不要讓用戶安裝軟件呢，畢竟還是有很多用戶不知道怎么安裝軟件或者這個東西需要什么東西才能打開嘛。ok，有了這樣的需求那我們是不是也得去實現(xiàn)嘛，畢竟這理由咱也沒法反駁啊。

思考

既然都提出來了，那就想想怎么使用咯。既然需要用到pdf。不知道有沒有關于js能夠操作的庫文件來幫我呢？果斷一百度，咱們今天的主角就來了：pdfjs。

庫目錄解析和下載

既然有了方案，那就去研究研究了，首先需要去下載這個庫的文件，下載地址：點我下載。這個頁面會有兩個，一個是兼容舊版的，大家可以根據(jù)自己的實際情況下載啊。

下載后的代碼結構如下圖：

這里面有兩個文件夾：

build 這里面是pdf核心文件
web 例子

使用方法

有兩種使用方法，一種是通過核心庫文件自己去實現(xiàn)pdf的預覽，還有一種是通過給的例子去預覽pdf文件。這里呢就以給的例子來預覽pdf文件，如果大家有興趣可以去研究研究怎么用核心文件去實現(xiàn)咯。

文件位置

首先我們需要將下載好的文件放到vue項目的static靜態(tài)目錄下，如下圖：

實際調(diào)用

在需要用到的地方使用如下方式調(diào)用：

var url = encodeURIComponent(window.location.origin+'/other/202101/dc88623a-74c4-49c4-bc95-7e34d9cf6163.pdf')
window.open(window.location.origin + window.location.pathname+'static/pdfjs/web/viewer.html?file='+url)