vue怎么使用pdfjs預(yù)覽pdf文件

這篇文章主要介紹“vue怎么使用pdfjs預(yù)覽pdf文件”，在日常操作中，相信很多人在vue怎么使用pdfjs預(yù)覽pdf文件問題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”vue怎么使用pdfjs預(yù)覽pdf文件”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

前言

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

思考

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

庫(kù)目錄解析和下載

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

下載后的代碼結(jié)構(gòu)如下圖：

這里面有兩個(gè)文件夾：

• build 這里面是pdf核心文件

• web 例子

使用方法

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

文件位置

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

實(shí)際調(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)

上面的pdf地址為自己放在本地的路徑，這里路徑可以為相對(duì)和絕對(duì)路徑，上面為絕對(duì)路徑

這時(shí)就可以看到如下效果啦：

問題

如果這個(gè)pdf文件的地址和當(dāng)前下載的庫(kù)文件地址在相同的域下，應(yīng)該不會(huì)有太大問題的，如果不同域下就需要解決跨域的問題了。這里有個(gè)地方需要解決就是我們下載的庫(kù)文件，找到viewer.js文件中下面的內(nèi)容注釋：

將上圖中紅色框框里面的內(nèi)容注釋。如果服務(wù)端給出的是下載地址，那么可以使用iframe嵌套來(lái)解決。

總結(jié)

其實(shí)可以看到跨域的知識(shí)有時(shí)候還是很有用的，上面就用到了，我剛開始弄的時(shí)候怎么都出不來(lái)，后面發(fā)現(xiàn)跨域下載不下來(lái)。當(dāng)前還有更多的用法和問題，歡迎大家提出來(lái)。

到此，關(guān)于“vue怎么使用pdfjs預(yù)覽pdf文件”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！