最近在项目里遇到很多pdf预览的功能,也试过很多插件,都有这样那样的问题,最终还是选择的vue-pdf这个插件,其中也遇到了问题,最终抽离成了一个组件,可以直接使用。
首次下载vue-pdf,如果直接下载的话 ,使用过程会报错,原因是版本和node版本不契合,不支持导致的。
这里就遇到过这个报错:
Cannot read properties of undefined (reading 'catch')" found in ---> <ResizeSensor> at node_modules/vue-resize-sensor/src/resize-sensor.vue
最终解决方案:重新下载指定版本的 vue-pdf;
1 下载vue-pdf,以及对应的依赖
npm install vue-pdf@4.2.0 pdfjs-dist@2.5.207
2 抽离pdf预览,pdf查看组件,命名为 pdfindex.vue
<template>
<div class="pdf_wrap">
<div class="pdf_list">
<!-- src:pdf地址,page: 当前显示页 -->
<pdf v-for="i in numPages" :key="i" :src="src" :page="i" style="width: 100%" > </pdf>
</div>
<div class="close" @click="closePdf">
关闭
</div>
</div>
</template>
<script>
import pdf from 'vue-pdf';
export default {
components: {
pdf,
},
props: {
pdfurl: {
type: String,
},
},
data () {
return {
src: '',
numPages: undefined,
}
},
mounted () {
this.loadPdf(this.pdfurl)
},
methods: {
loadPdf (url) {
this.src = pdf.createLoadingTask(url)
this.src.promise.then(pdf => {
this.numPages = pdf.numPages // 这里拿到当前pdf总页数
})
},
closePdf() {
this.$emit('closePdf')
}
}
}
</script>
<style scoped>
.pdf_wrap {
background: #fff;
height: 100vh;
position: relative;
}
.pdf_list {
height: 100vh;
overflow: scroll;
}
.close {
position: absolute;
left: 0;
bottom: 0;
height: 40px;
width: 100%;
line-height: 40px;
text-align: center;
color:#367CFD;
font-size:12px;
background: #fff;
}
</style>
3. 在需要用到pdf预览的页面 引入组件,我这里讲组件放在了弹窗中,点击显示,又给pdf组件本身添加了一个关闭弹窗的方法 :closePdf, 通过this.$emit('closePdf') 传值父组件关闭弹窗;
<van-popup v-model="showPicker" position="bottom">
<pdf :pdfurl="pdfurl" @closePdf="closePdf"></pdf>
</van-popup>
import pdf from './pdfindex.vue';
export default {
computed: {
...mapGetters(["userInfo", "project"]),
},
data() {
return {
data:'',
showPicker:false,
pdfurl:'admin/sys-file/iipi/ade2a43b970b4b3ab46a03cad4af52ba.pdf',
};
},
methods:{
closePdf() {
this.showPicker =false;
},
}
最终效果
页面1
页面2