参与github 文档?
??????GitHub - FranckFreiburger/vue-pdf: vue.js pdf viewer
完整示例代码、
安装组件》注册组件》使用组件
npm install vue-pdf
yarn add vue-pdf
<template>
<div class="app-container">
<el-col :span="1.5">
<el-button @click="handleBack" icon="el-icon-d-arrow-left" size="mini" type="primary">返回</el-button>
</el-col>
<div class="pdf_wrap">
<div class="pdf_list">
<!-- src:pdf地址，page: 当前显示页 -->
<pdf :key="i" :page="i" :src="src" style="width: 100%" v-for="i in numPages"></pdf>
</div>
</div>
</div>
</template>
<script>
import { getProject } from '@/api/project/project'
import pdf from 'vue-pdf'
export default {
components: {
pdf
},
data() {
return {
alyImagesPath: 'https://oss.zenithward.cn',
projectId: '',
numPages: undefined,
currentPage: 0,
pageCount: 0,
pdfUrl: '',
src: ''
}
},
created() {
this.projectId = this.$route.query.projectId
},
mounted() {
this.initBzProject()
},
methods: {
handleBack() {
// 调用全局挂载的方法,关闭当前标签页
this.$store.dispatch('tagsView/delView', this.$route)
this.$router.push(
{
path: '/project/stander',
query: { projectId: this.$route.query.projectId }
})
},
initBzProject() {
getProject(this.projectId).then(response => {
let projectVo = response.data
this.pdfUrl = this.alyImagesPath + projectVo.fileUrl
this.loadPdf()
})
},
loadPdf() {
this.src = pdf.createLoadingTask(this.pdfUrl)
this.src.promise.then(pdf => {
this.numPages = pdf.numPages // 这里拿到当前pdf总页数
})
}
}
}
</script>
<style scoped>
.pdf_wrap {
background: #fff;
height: 90vh;
}
.pdf_list {
height: 95vh;
overflow: scroll;
}
</style>
在浏览器中
vue-pdf组件报错vue-pdf Cannot read properties of undefined (reading ‘catch‘)
执行命令，指定对应版本安装即可
npm i pdfjs-dist@2.5.207
npm i vue-pdf@4.2.0
