实如今线预览远程服务器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文件地址