实现在线预览远程服务器pdf文件心路历程
前言大家都知道在线预览本地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/解压后的目录结构是：
https://user-gold-cdn.xitu.io/2019/5/5/16a85f75224c8e58?imageView2/0/w/1280/h/960/format/webp/ignore-error/1
其中build目录是PDF.js的核心文件。
web目录是PDF.js的配置与显示文件。
https://user-gold-cdn.xitu.io/2019/5/5/16a85f81e6ecdc0c?imageView2/0/w/1280/h/960/format/webp/ignore-error/1viewer.html是负责显示PDF的，viewer.js是负责配置的文件。viewer.js中：
https://user-gold-cdn.xitu.io/2019/5/5/16a85f89f7203cc4?imageView2/0/w/1280/h/960/format/webp/ignore-error/1其中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文件地址
转载于:https://juejin.im/post/5cce452551882541e27b0c04
页:
[1]