vue 使用pdf.js

到官网下载 pdf.js 插件并解压 (地址: http://mozilla.github.io/pdf.js/ )

[图片上传中...(1574041948(1).png-502222-1574041970047-0)]

image.png

解压之后

1574042041(1).png

创建pdf.js文件夹 并将刚解压的文件放入其中 然后放在static文件夹下面，这个不会被打包

我是在详情页文章里面有pdf文件 ，我把PDF单独写了一个页面，我把pdf的url地址带到PDF页面

    pdfclick(url) {
　　 this.$router.push({path:'/PDF',query: {id:url}})
    },

PDF页面接收url

 created: function(){
    this.id= this.$route.query.id
  },

PDF页面我是用的iframe来打开pdf的url

    <iframe :src="'/static/pdf/web/viewer.html?file=' + encodeURIComponent(this.id)" frameborder="0" ref="previewIframe" 
     id="show-iframe" scrolling="auto" ">
    </iframe>

iframe 的src的路径是你的下载的pdf.js存放的地址这 file是固定写法。
pdf.js需要转一次码 所以用的encodeURIComponent()

还有一个问题，你的pdf的url要支持所有人访问，要不然会报跨域错误。

好了，完美解决。