实现在线预览远程服务器pdf文件心路历程

zhoji

前言

大家都知道在线预览本地pdf文件、只要将地址定位到本地pdf所在目录，即可打开pdf文件。但是如果地址直接指向服务器地址呢，近期做的项目是在线预览服务器上的pdf文件，出现了跨域问题，无法正常获取预览文件。

首先想到的解决方法：

1、让存放pdf文件的服务器支持跨域

但问题又来了，存放pdf文件的服务器有很多、以后还可能增加，每次都配置一下跨域、实在繁琐、而且也存在安全问题

2、当前项目的后台增加一个将远程文件转换成文件流的接口、直接给前端输出支持跨域的文件流、---------方案可行----------------

前端怎么展示 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文件，可以对他进行替换。

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

复制代码

test变量指的是：

1. 
   
2. encodeURIComponent('https://pch5.test.com/api/requestFile.pdf?requestUrl='+target.href)

复制代码

target.href变量指的是远程服务器的pdf文件地址

转载于:https://juejin.im/post/5cce452551882541e27b0c04