vue-pdf如何使用？在vue2项目中pdf预览的具体组件化方法

最近在项目里遇到很多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