最近遇到乙個實現pdf檔案預覽功能的需求，分享一下實現方法：
pdf預覽相對word、excel、ppt等檔案的預覽比較容易，因為常見的瀏覽器都是支援pdf檔案直接預覽，所以最簡單的實現方法就是在瀏覽器中直接輸入pdf檔案存放在伺服器上的路徑位址就可以直接預覽；
1、使用瀏覽器預設支援訪問pdf檔案的功能
1.1、當後端返回的是pdf檔案在伺服器上的路徑時，直接訪問該路徑即可
這樣當我們呼叫後端介面，後端返回pdf檔案流時就可以直接在瀏覽器上訪問；
2、使用pdf.js進行預覽
3、在vue專案根目錄下建立static資料夾用於存放靜態資源（已存在則不需要重複建立），在static下新建名稱pdf資料夾並將解壓後的pdf.js檔案放在該目錄中
我們就是利用viewier.html檔案來進行pdf檔案的預覽。
window.
open
(`/static/pdf/web/viewer.html?file=$`
);
pdffileurl為pdf檔案存放伺服器的位址
q&a：
1、pdf.js是乙個開源的外掛程式，為什麼不使用npm install方式安裝？
2、為什麼要使用copy-webpack-plugin外掛程式將靜態資源複製乙份到dist目錄下？
我們在本地啟動專案後，通過localhost:8080訪問時，其實就是訪問webpack-dev-server上的靜態資源，webpack會自動打包專案**並將打包後**放在webpack-dev-server上，也就是使用dist下的資源作為靜態資源，因此，無論是開啟本地服務還是上線之後，我們都需要將pdf.js的檔案作為靜態資源放在伺服器上；而copy-webpack-plugin外掛程式可以很方便的幫助我們將靜態資源放在dist目錄下。
可能會遇到的問題：
2.1、在使用copy-webpack-plugin外掛程式時，需要注意由於copy-webpack-plugin外掛程式版本與webpack版本不相容帶來的問題。
我們專案使用的webpack版本是3.x版本的，如果安裝最新的copy-webpack-plugin外掛程式也就是5.x版本的，會出現如下報錯：
解決辦法：
對於webpack 3.x版本的，推薦安裝copy-webpack-plugin 4.x版本的，這樣就不會出現版本相容問題，親測有效。
這是由於pdf.js不支援跨域請求，才報的錯：file origin does not match viewer』s
解決辦法：
// if (origin !== viewerorigin && protocol !== 'blob:')vue專案中操作PDF檔案
以前從來沒接觸過前端要求顯示pdf檔案，一時之間有點懵逼，不知從哪下手啊.無奈之下，去找度娘，方法還不少，iframeembedobject這些標籤就可以，可是拿過來做個demo一試，並沒有什麼卵用，網頁中可以顯示pdf，但是頁面上就是出不來，反正我是沒有試成功 還有pdfobject pdf.js...
PDF預覽 pdfJS預覽pdf檔案
方式1 檔案流轉為blob let urlsrc window.url.createobjecturl blob this src urlsrc pdf空白頁 else 正確解析了頁碼，但是每頁空白。解決方法 responsetype blob html visible.sync dialo isi...
vue專案 匯入pdf功能 以及 預覽Pdf
先上效果圖 上傳pdf的具體 如下 class upload demo ref upload action action on preview handlepreview on remove handleremove before upload beforeupload multiple limit...