vue-pdf是封装的PDF.js
<template>
<div>
<pdf v-for="i in numPages" :key="i" :src="src" :page="i" style="display: inline-block; width: 100%"></pdf>
</div>
</template>
<script>
import pdf from 'vue-pdf'
export default {
components: {
pdf
},
data() {
return {
pdfurl: '', //传过来的初始的pdf路径 不包含 proxy中的代理路径
src: '',
numPages: 1,
isFromDetail: false, //路由是否从detail页过来
}
},
mounted() {
this.pdfurl = this.$route.query.pdfurl
// this.getNumPages('http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf')
this.getNumPages(自己设置的proxy代理 + this.pdfurl)
},
methods: {
getNumPages(url) {
var loadingTask = pdf.createLoadingTask(url)
loadingTask
.then(pdf => {
this.src = loadingTask
this.numPages = pdf.numPages
})
.catch(err => {
console.error('pdf加载失败', err)
})
}
}
}
</script>
用以上方式有个BUG，但是不影响使用:
控制台，会在请求pdf时 报一堆错，猜测可能是vue-pdf源码中使用了具体的pdf的内容，在没有请求完pdf时，因为没有具体内容，所以会报错
