pdf预览在vue项目中的使用兼容ie浏览器

最近做项目有需求需要pdf在线预览并支持下载，而且还要兼容ie浏览器，之前又是使用过vue-pdf插件在chrome上没有问题但是在ie上不兼容。最后使用了pdf.Js这个原生库，虽然网上有许多使用教程但是还是踩了不少坑，所以在此记录下来。

一、下载pdf.js这个插件

 链接: https://pan.baidu.com/s/1RVeDiPQKG4GfBNbwc_fqqQ 提取码: 4dgg

 也可以在官网上下载或者在github上下载（官网上贼慢）

二、将下面两个文件复制到项目中

需要找到build和web这两个文件夹放在项目的public下（使用的是vue-cli3）

三、直接可以在项目中使用了不需要额外的引入

有三种方式可以预览pdf，都需要注意路径问题：

pSrc为预览pdf的完整路径：
第一个红色框里面为 打开pdf.js的地址需要根据自己放置文件的地址进行修改。
第二个红色框内为需要预览的pdf的完整地址，需要使用pdf自带的方法encodeURIComponent（）进行解析。

路径处理完，就可以根据自己的情况使用下面三种方法进行预览了

1、使用iframe标签直接引入

2、使用a标签在本页面直接预览

3、使用window.open打开新的页面进行预览

预览效果如图：

四、遇到的问题

1、 在pdf预览的时候可能会存在跨域问题

这个问题我没有遇到但是看到别的小伙伴有遇到这个问题，所以说下看到的解决办法吧：

找到复制pdf的文件夹web下的viewer.js 然后找到下图中的代码直接注释掉就可以了

2、ie浏览器不兼容问题

在这个问题上浪费了不少时间,我们后端给返回的是文件流的形式,直接使用上面的方法进行预览,在Chrome和其他浏览器上都可以正常预览,但是在ie浏览器上有时候可以打开,更多的时候会报下图中的错误,预览失败,在网上也搜索到了有小伙伴遇到这个问题但是没有解答,试了好多方法都不好使(包括让后端返回流时添加文件类型的标识),最后偶然发现一个博主的git的案例找到了解决方法.

猜测原因是因为后端返回的流ie浏览器因为某些原因老是解析失败.

解决办法: 直接返回文件在服务器中存放的地址,可以在浏览器中直接访问的url就可以了.

3、预览文件title标题标题问题

因为后端查找在服务器上的文件是id的地址，所以预览的时候自动换的就是id值或者是undefined，现在手动添加预览文件名

问题如下图所示：

解决方法：

步骤1
找到viewer.js中的代码进行改动如下图:

解析预览地址中faleName的参数。

步骤2
因为修改了解析url中的faleName字段所以我们在代码中的预览地址直接加上这个参数字段并且把返回来的文件名拼接上就可以了。如下图：

解决后的效果如下图：

最后放上那位博主的git地址链接:https://github.com/goSunadeod/vue-pdf.js-demo

大家作为对照参考,如果有帮助到你,给那位博主支持一下。