本文主要是介绍可以在线阅览文件服务器,实现在线预览远程服务器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将其打包。
解压后的目录结构是：
其中build目录是PDF.js的核心文件。
web目录是PDF.js的配置与显示文件。
viewer.html是负责显示PDF的，viewer.js是负责配置的文件。viewer.js中：
其中var DEFAULT_URL 是默认解析的PDF文件，可以对他进行替换。
复制代码
test变量指的是：
encodeURIComponent('https://pch5.test.com/api/requestFile.pdf?requestUrl='+target.href)
复制代码
target.href变量指的是远程服务器的pdf文件地址
这篇关于可以在线阅览文件服务器,实现在线预览远程服务器pdf文件心路历程的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
