前景回顾：

上一次说到使用浏览器自带的预览pdf功能所遗留的问题，360浏览器不够给力，IE的我没测，估计也不行，于是乎我又翻阅资料（度娘）找到了一种新的实现方式，使用pdf.js实现 如果想看使用浏览器实现预览pdf可以看我这篇博客 传送门

---

环境搭建：

**先下载一个pdf.js 咱走官方渠道，直接去官网下载 官网下载
这里推荐一个vue小demo，vue-pdf.js,我会以该demo为基础来实现预览pdf功能。

---

简单实现：

下载好pdf.js的源码，放到自己的项目中，打开viewer.html会自动跳转到一个pdf文件，这个pdf文件是官方的事例文件。如果我们只需要打开一个pdf文件的话，我们只需要将官方的文件替换一下即可。那么这个文件要在哪里替换呢？？？

在viewer.js文件中，我们搜索defaultUrl，大概在3500行左右，就可以发现如上图一样的代码，（注意：不同版本的pdf.js可能会有点差异）只需要将value值更改即可实现预览pdf功能。
但是这样的实现并不能解决需求，我们肯定是要动态的获取我们想要预览的pdf，前端传值，我们根据不同的值来响应不同的pdf，那这样我们该怎么做呢

---

复杂实现：

刚刚让各位下载的vue小demo就派上用场了。接下来我会在该demo的基础上稍作修改进行功能实现。
项目跑起来主要长这样

主要讲解两个实现方法，一种是在viewer.html后拼接文件的url，另一种是后端返回流，前端解析预览。

拼接文件url实现方式

** 这种方式最简单，但是会遇到典型的跨域问题，不过也好解决，文件一般都放在资源服务器中，如果是自己搭建的，在网上找找如何解决跨域即可，不过我觉得还是用别人做好的省事，我们用的就是阿里云的OSS，用阿里云的你需要在阿里云上配置一下OSS，Bucket的跨域，至于在哪些域能访问就看你个人需求了**
注意:如果仍报跨域错误请找到viewer.js文件注释一段代码如下图(大概在1730行左右的样子,如果继续报错,建议重新build)

前端代码实现：

主要看checkLocal方法，在html后拼接file=url即可打开，这里需要注意一下，url需要编码，这里推荐使用global对象的encodeURIComponent方法，有效的URI中不能包含某些字符，例如空格。而这URI编码方法就可以对URI进行编码，它们用特殊的UTF-8编码替换所有无效的字 符，从而让浏览器能够接受和理解。

读取文件流预览pdf

该方法配置稍微多一点，前后端都需要写一些东西，直接贴代码
前端代码
axios配置


主要的代码就是创建一个blob，不懂啥意思，百度了一下康康吧

通过URL.createObjectURL方法创建一个xxx对象（不懂用就完事了）

后端代码：

这里的contentType和前端创建blob时设置的要一致。如果还有问题的话可以留言区讨论一下。
谢谢各位帅哥美女的观看，记得点赞关注加收藏哟~~~