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>