终极精品

标题: 实现在线预览远程服务器pdf文件心路历程 [打印本页]

作者: zhoji 时间: 2020-5-12 20:23
标题: 实现在线预览远程服务器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/

解压后的目录结构是：

其中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文件地址

欢迎光临终极精品 (http://www.chnspy.com/)