vue 使用懒加载方式预览pdf页面

<template>
    <div class="pdfPreview" ref="pdfPreview" id="pdfPreview">
        <pdf
            v-for="page in pageNum"
            :key="page"
            :page="page"
            :src="url"
        ></pdf>
    </div>
</template>


<script>
//使用npm install的方式将包加入到项目package.json
import pdf from 'vue-pdf'

export default {
    name: 'Pdf',
    components: {
        pdf
    },
    data () {
        return {
            pdf:'',
            filePath: this.$route.params.filePath,
            fileName: this.$route.params.fileName,
            token: this.$cookie.get('token'),
            url: '',
            //懒加载页数
            pageNum: 1,
            //总页数
            numPages: '',
            height: '',
        }
    },

    activated () {
        this.init();
        this.getScroll()
    },
    mounted() {//实时监听滚动条的变化
        window.addEventListener('scroll', this.getScroll,true)
    },
    destroyed() {//注意：监听的函数要在关闭页面时销毁掉,不然会影响到其它页面
        window.removeEventListener('scroll', this.getScroll)
    },
    methods: {
        init () {
            //获取下载地址链接
            this.url = this.filePath + '&proviewFlag=' + 'true'
            this.url = pdf.createLoadingTask(this.url);
            this.url.promise.then(pdf => {
                this.pdf = pdf
                this.numPages = pdf.numPages;
                //滚动加载
                this.getScroll();
            });
        },
        getScroll(e) {
            console.log(e.target.scrollTop ,'滚动高度')
            const scrollTop = e.target.scrollTop
            if(this.fileName.indexOf('pdf')!=-1){
                this.height = 1300
            }else {
                this.height = 550
            }
            console.log(this.pageNum, this.height*(this.pageNum-1),scrollTop,this.height*(this.pageNum+1))
            if ((scrollTop > this.height*(this.pageNum-1))&&(scrollTop < this.height*(this.pageNum+1))) { //懒加载条件限制判断
                if (this.pageNum < this.numPages) {//做一次判断
                    //达到条件后执行这个函数
                    this.pageNum += 1
                    // this.pdf.getPage(this.pageNum).then(page => {
                    //   console.log(page,'page')
                    // })
                    console.log('达到加载条件，执行加载');
                }
            }
        },
        // 获取pdf页数
        getNumPages () {
            console.log(this.url,'page')
            let loadingTask = pdf.createLoadingTask(this.url)
            loadingTask.promise.then(pdf => {
                this.numPages = pdf.numPages
            }).catch(err => {
                this.numPages = 0
                console.error('pdf 加载失败', err)
            })
        },
    }
}
</script>