目錄

前言

在寫專案的過程中，偶爾會有使用到pdf的檔案，當我們想看pdf檔案的時候，你的操作是不是先把pdf檔案下載下來，通過電腦安裝的專用於開啟pdf的軟體來檢視pdf檔案呢。如果有個需求說不要讓使用者安裝軟體呢，畢竟還是有很多使用者不知道怎麼安裝軟體或者這個東西需要什麼東西才能開啟嘛。ok，有了這樣的需求那我們是不是也得去實現嘛，OYiSW畢竟這理由咱也沒法反駁啊。

思考

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

庫OYiSW目錄解析和下載

既然有了方案，那就www.cppcns.com

下載後的程式碼結構如下圖：

這裡面有兩個資料夾：

• build 這裡面是pdf核心檔案
• web 例子

使用方法

有兩種使用方法，一種是通過核心庫檔案自己去實現pdf的預覽，還有一種是通過給的例子去預覽pdf檔案。這裡呢就以給的例子來預覽pdf檔案，如果大家有興趣可以去研究研究怎麼用核心檔案去實現咯。

檔案位置

首先我們需要將下載好的檔案放到vue專案的static靜態目錄下，如下圖：

實際呼叫

在需要用到的地方使用如下方式呼叫：

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地址為自己放在本地的路徑，這裡路徑可以為相對和絕對路徑，上面為絕對路徑

這時就可以看到如下效果啦：

問題

如www.cppcns.com果這個pdf檔案的地址和當前下載的庫檔案地址在相同的域下，應該不會有太大問題的，如果不同域下就需要解決跨域的問題了。這裡有個地方需要解決就是我們下載的庫檔案，找到viewer.js檔案中下面的內容註釋：

將上圖中紅色框框裡面的內容註釋。如果服務端給出的是下載地址，那麼可以使用iframe巢狀來解決。

總結

其實可以看到跨域的知識有時候還是很有用的，上面就用到了，我剛開始弄的時候怎麼都出不來，後面發現跨域下載不下來。當前還有更多的用法和問題，歡迎大家提出來。

以上就是如何在vue中使用pdfjs預覽pdf檔案的詳細內容，更多關於vue中使用pdfjs預覽pdf檔案的資料請關注我們其它相關文章！