1.引言

把pdf文件嵌入一个弹框中预览展示，PC端直接使用ifame标签即可，移动端却无法实现，可使用pdf.js插件

2.下载使用

（留下以下几个文件可实现预览）

用浏览器打开viewer,html（注意open in Default brower打不开;open in live serve可以）需要启动服务器打开

新URL: xxxx/web/viewer.html?file=xxx/xxx/xxx.pdf

Vue项目中要把pdf.js插件文件放到和src同级的静态文件static或public文件夹下

如果pdf文件和我们部署的viewer在同一个域底下的话那么直接加个file参数如：

 <iframe :src="'static/web/viewer.html?file=' + encodeURIComponent(文件URL)" width="100%"
 height="1000px" frameborder="0"></iframe>

encodeURIComponent可以省略

<iframe src="static/web/viewer.html?file=(文件URL)" width="100%"
 height="1000px" frameborder="0"></iframe>

(viewer.html的相对弹框的相对地址)?file=(本地文件相对xxxx/web/viewer.html的相对地址)

<iframe src="xxxx/web/viewer.html?file=xxx/xxx/xxx.pdf"/>

控制台报错

解决方法：打开viewer.js 注释掉跨域判断如下图：

然后我们再打开页面即可预览