PDFjs下载地址:https://mozilla.github.io/pdf.js/getting_started/#download
使用该插件是将整个文档下载下来,然后放在我们public静态文件下面,直接去引用就好了。
在页面中我们使用iframe来插入这个插件的页面
<iframe :src="src"
style="width: 100%;height: 100vh"></iframe>
这里的src需要我们将PDF的地址链接和插件页面拼接在一起直接放进去,url指定的就是PDF的地址链接
this.src = IP + '/PDF/web/viewer.html?file=' + IP + url
这是在本地使用的情况,正常情况下,插件里面是自带一个PDF文件的,可以直接浏览到,一旦我们动态指定了,就可以浏览到我们指定的PDF了。
第一种情况:就是页面在服务器中没有涉及到Nginx转发的情况,我们放在服务器就可以直接浏览或者看到PDF文件了。
第二种情况:就是页面在服务器配有Nginx转发,这个时候,我们就不需要将PDF文件放在本地了,因为放在本地,我们到服务器就被转发了,我们通过src这样的地址是没法直接访问的,我的解决方案是让后端把PDF的文件直接放到服务器里面,通过测试,生产地址直接访问这个页面,也就是IP指向的是测试,生产的IP地址。
特殊情况:如果后端将地址映射了,但是文件的地址没有变,那我们也需要将PDF文件访问的地址和.pdf文件的地址统一,也就是把映射地址改为.pdf文件所对应的地址,要做到地址统一。