vue | 您所在的位置:网站首页 › vuetopdf › vue |
参考官方示例:
官方地址:vue-pdf - npm
import pdf from 'vue-pdf'
export default {
components: {
pdf
},
data() {
return {
src: '',
numPages: undefined
}
},
mounted() {
},
beforeRouteEnter(to, from, next) {
// 路由守卫刚刚进入是没有实例化界面的,不能使用this
const queryParam = to.query
next(vm => {
vm.src = pdf.createLoadingTask(queryParam.url)
vm.src.promise.then(pdf => {
vm.numPages = pdf.numPages
})
})
}
}
.main {
width: 80%;
margin: 0 auto;
padding: 5px;
}
使用路由打开新界面 queryParam.url 中可以是真实的后台文件服务器地址,也可以是通过二进制流返回后使用 var blob = new Blob([res], { type: 'application/pdf' }) const urlObj = URL.createObjectURL(blob)创建的url ,直接打开就可以访问pdf,通过滚轮可以浏览全部文档 |
CopyRight 2018-2019 实验室设备网 版权所有 |