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>