vue-pdf展示所有的数据分页

1.分页

<pdf

          v-for="i in numPages"

          :key="i"

          :src="url"

          :page="i"

        ></pdf>

        <pdf

          :page="pageNum"

          :src="url"

          @progress="loadedRatio = $event"

          @num-pages="pageTotalNum = $event"

        ></pdf>

        <div class="pagesStyle">

          {{ pageNum }} / {{ pageTotalNum }}

        </div>

        <div class="nextPrv" style="margin-bottom: 20px">

          <el-button-group style="text-align: right;">

            <el-button

              type="primary"

              icon="el-icon-arrow-left"

              size="medium"

              @click="prePage"

              >上一页</el-button

            >

            <el-button type="primary" size="medium" @click="nextPage"

              >下一页<i class="el-icon-arrow-right el-icon--right"></i

            ></el-button>

        </el-button-group>

</el-dialog>

data() {

    return {

        pageNum: 1,

        url: 'http://image.cache.timepack.cn/nodejs.pdf',

        pageTotalNum: 1,

        loadedRatio: 0,

        pagesNum: null,

    }

},

methods: { 

     prePage() {

      let page = this.pageNum

      page = page > 1 ? page - 1 : this.pageTotalNum

      this.pageNum = page

    },

    // 下一页

    nextPage() {

      let page = this.pageNum

      page = page < this.pageTotalNum ? page + 1 : 1

      this.pageNum = page

      console.log(this.pageNum);

    },

     //调用后端的接口返回具体的url，此url为真实的pdf路径

     this.url = path.replace("http://cqzx.credit.report.cq4oss.ctyunxs.cn/",'/prod-pdf/')

}

2. 不分页（滚动展示pdf）

<pdf v-for="i in numPages" :key="i" :src="url" :page="i"></pdf>

data () {

        return {

                url: 'http://image.cache.timepack.cn/nodejs.pdf',

                numPages: undefined,

        }
}，

methods: {

        //调用后端的接口返回具体的url，此url为真实的pdf路径

        this.url = path.replace("http://cqzx.credit.report.cq4oss.ctyunxs.cn/",'/prod-pdf/')

        let src = pdf.createLoadingTask(this.url)

        src.promise.then(pdf => {

                this.numPages = pdf.numPages

        })

}