到官網(wǎng)下載 pdf.js 插件并解壓 (地址: http://mozilla.github.io/pdf.js/ )
[圖片上傳中...(1574041948(1).png-502222-1574041970047-0)]
image.png
解壓之后
1574042041(1).png
創(chuàng)建pdf.js文件夾 并將剛解壓的文件放入其中 然后放在static文件夾下面，這個(gè)不會(huì)被打包
我是在詳情頁文章里面有pdf文件 敢艰，我把PDF單獨(dú)寫了一個(gè)頁面俩功，我把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需要轉(zhuǎn)一次碼 所以用的encodeURIComponent()
還有一個(gè)問題枣抱，你的pdf的url要支持所有人訪問荣赶，要不然會(huì)報(bào)跨域錯(cuò)誤蹋偏。
好了昌讲，完美解決重归。
