H5页面pdf预览插件pdf.js的使用及问题解决

最近需要在移动端页面中预览pdf文件，IOS用户可以直接打开预览，但android手机打开pdf格式的文件是下载，经过查阅对比发现，pdf.js比较稳定。

　　它可以支持pdf在html页面的展示，且自带对预览pdf文件操作工具，经过实际检测，在Apple手机和android手机都可以正常预览。

pdf.js下载地址：PDF.js

下载完成之后，解压会得到以下的文件

接下来就是使用方式：

把解压的三个文件直接放到vue项目的public目录下，或者用一个文件夹装起来再放到public目录下（防止一段时间后看到这三个零散的文件不知道是干什么的）。

然后新建一个页面用来预览pdf，使用iframe标签（自行设置为全屏宽高），src的值为解压得到的web文件夹中的viewer.html的路径：/PDFPreview/web/viewer.html。

这时页面会展示一个默认的pdf预览：

想要预览自己远程服务器的pdf，修改iframe的src="/PDFPreview/web/viewer.html?file=https://xxx.pdf"。

但是预览远程服务器pdf会报错：file origin does not match viewer's

最直接的解决办法是注释掉判断来源为远程pdf的代码：

至此，问题解决~