實如今線預覽遠程服務器pdf文件心路歷程

前言

你們都知道在線預覽本地pdf文件、只要將地址定位到本地pdf所在目錄，便可打開pdf文件。可是若是地址直接指向服務器地址呢，近期作的項目是在線預覽服務器上的pdf文件，出現了跨域問題，沒法正常獲取預覽文件。

首先想到的解決方法：

一、讓存放pdf文件的服務器支持跨域

但問題又來了，存放pdf文件的服務器有不少、之後還可能增長，每次都配置一下跨域、實在繁瑣、並且也存在安全問題

二、當前項目的後臺增長一個將遠程文件轉換成文件流的接口、直接給前端輸出支持跨域的文件流、---------方案可行----------------

前端怎麼展現 pdf文件呢？

• iframe標籤展現pdf：在pc瀏覽器上的是支持經過url直接預覽pdf文件的、ios移動端瀏覽器也支持、但在android手機上、有的瀏覽器卻 彈出下載框、下載到本地才能預覽，這種iframe展現的方式失敗了

本文說一下pdf插件的使用過程

最後上網搜資料，發現了pdfjs插件、又找了vue-pdf組件直接拿來用、功能是實現了，可是打包之後、dist包文件瞬間翻了一倍大

最後去pdfjs官網下載了庫文件、在public static文件下引入、避免了webpack將其打包。

PDF.js可在官網下載 地址：mozilla.github.io/pdf.js/

解壓後的目錄結構是：

其中build目錄是PDF.js的核心文件。

web目錄是PDF.js的配置與顯示文件。

viewer.html是負責顯示PDF的，viewer.js是負責配置的文件。viewer.js中：

其中var DEFAULT_URL 是默認解析的PDF文件，能夠對他進行替換。

<iframe id="frame" :src="'/static/pdf/web/viewer.html?file='+test"></iframe>
複製代碼

test變量指的是：

encodeURIComponent('https://pch5.test.com/api/requestFile.pdf?requestUrl='+target.href)
複製代碼

target.href變量指的是遠程服務器的pdf文件地址