前言：

最近領導讓研究H5如何通過後端返回流的方式去預覽PDF檔案，通過實踐，現總結如下：

外掛目錄如下圖：

當下載下來後，為做測試，將目錄檔案直接部署線上伺服器，去直接訪問viewer.html看是否能成功，輸入地址： ‘線上地址域名:’ + pdfTest/pdf/web/viewer.html 初次訪問成功，如下圖：

當viewer.html後面沒有接入file=pdf檔案時，會默然訪問pdf檔案，預設地址如下圖：

測試是否能訪問其它圖片，現將測試pdf檔案放入viewer.html同級目錄：如下圖：

然後在瀏覽器中訪問該pdf檔案，瀏覽器輸入地址：
‘線上地址域名:’ + pdfTest/pdf/web/viewer.html + ‘?file=test.pdf’，訪問成功！(當訪問pdf檔案時，需要加入.pdf字尾才能正常訪問，否則報錯)

二.將引起跨域報錯的地方註釋(如果不註釋,當viewer.html頁面的域和pdf檔案域不一致的時候會報錯)如下圖：

三.通過iframe巢狀方式去預覽pdf

<iframe :src="url" width="100%" height="100%"></iframe>

// pdfUrl:  返回流檔案的pdf地址（返回的地址可直接在瀏覽器中開啟）
// baseUrl.pageRoot: pdf外掛線上伺服器地址

// file=後面跟的pdf地址也有引數，所以必須選擇 encodeURIComponent 進行對url的編碼
// viewer.js裡有方法parseQueryString(query)取到這個pdf檔案地址後，會進行decodeURIComponent解碼
 


this.url = `${baseUrl.pageRoot}pdf/web/viewer.html?file=${encodeURIComponent(pdfUrl)}`