Vue 封装vue-pdf组件，实现分批显示，解决页数多加载慢的问题

效果：

组件代码：

代码中用到了async? wait 异步等待，等待获取到pdf页数后才继续操作

<template>
    <div class="flex flex-col" >
        <div class="flex flex-space-between">
             <div class="flex show" >
                <div v-if="numPages > limit" class="margin-left-m ui-yes-button flex flex-center-sp  flex-center-cz w60 " @click="prior">前{{limit}}页</div>
                <div v-if="numPages > limit" class="margin-left-m ui-yes-button flex flex-center-sp  flex-center-cz w60" @click="next">后{{limit}}页</div>
             </div>
             <div class="ui-print-button flex flex-center-sp  flex-center-cz w60" @click="down">下载</div>
        </div>
        <div class="pdfDiv" style="overflow: auto;"  :style="{'height': height }" ref="pdfDiv">
            <pdf :key="i"
                :page="i"
                :src="url"
                class="margin-m book"
                ref="pdf"
                v-for="i in pages"
            ></pdf>
        </div>

    </div>

</template>

<script>
    import pdf from 'vue-pdf'
    import { downFile } from '@/utils/httputils'

    export default {
        name: 'PdfView',
        components: {
            pdf
        },
        props: {
            url: {},
            fileName:{},
            height:{}
        },
        data() {
            return {
                pages:[],
                numPages: null, // pdf 总页数
                limit: 10,
                pageIndex: 1,
                pageCount: null,
                loading: false,

            }
        },
        async mounted() {
            this.numPages = await this.getNumPages();
            this.pageCount = this.getPageCount(this.numPages, this.limit);
            this.pageIndex = 1;
            this.pages = this.getPages(this.numPages, this.limit, this.pageIndex);
        },
        methods: {
            //计算pdf页码总数
            async getNumPages() {
                if (this.url == null) {
                    this.url = "";
                }
                return new Promise((resolve, reject)=> {
                    let loadingTask = new pdf.createLoadingTask(this.url);
                    loadingTask.promise.then((pdf) => {
                        console.log("页数=====",pdf.numPages)
                        resolve(pdf.numPages)
                    }).catch(err => {
                        reject(err)
                    })                   
                })    
            },
            //获取总批数
            getPageCount (totalnum,limit){
                return totalnum > 0 ? ((totalnum < limit) ? 1 : ((totalnum % limit) ? (parseInt(totalnum / limit) + 1) : (totalnum / limit))) : 0;
            },
            //获取分组数组
            getPages(total, limit, index) {
                let result = [];
                if (index * limit <  total) {
                    for (let i=1; i<=limit; i++) {
                        result.push(limit*(index-1) + i);
                    }
                } else {
                    let ys = (total - limit*(index-1));
                    for (let i=1; i<=ys; i++) {
                        result.push(limit*(index-1) + i);
                    }
                }
                return result;
            },
            prior() {
                this.pageIndex = this.pageIndex - 1;
                if (this.pageIndex < 1) {
                    this.pageIndex = 1
                }
                this.pages = this.getPages(this.numPages, this.limit, this.pageIndex);
                //滚到顶部
                this.$refs.pdfDiv.scrollTo({ top: 0, behavior: 'smooth' });
            },
            next() {
                this.pageIndex = this.pageIndex + 1;
                if (this.pageIndex > this.pageCount) {
                    this.pageIndex = this.pageCount
                }
                this.pages = this.getPages(this.numPages, this.limit, this.pageIndex);
                //滚到顶部
                this.$refs.pdfDiv.scrollTo({ top: 0, behavior: 'smooth' });
            },
            down() {
                downFile(this.url, this.fileName);
            }

        }
    }


</script>
<style scoped>

    .pdfDiv {
        margin : 5px 100px;
    }

</style>

调用组件：

<template>
    <div class="root flex flex-col border-box">
        <div style="width: 800px;" >
            <PdfView :url="'http://minio.anyroad.com.cn:9000/temp/ls.pdf'" :fileName="'历史.pdf'" :height="'650px'" ></PdfView>
        </div>

    </div>
</template>