vue-pdf在线预览

需要展示的pdf文件内容，通过按钮进行上下页的展示与翻页（可以滚动翻页但是加载慢）

1.安装vue-pdf：npm i vue-pdf --save -dev

<div v-loading="loading">

        <pdf

            ref="pdf"

            :src="url"

            :page="pdfPage"

            @num-pages="pageCount=$event"

            @page-loaded="pdfPage=$event"

            @loaded="loadPdfHandler">

        </pdf>

        <div class="arrow">

            <span @click="changePdfPage(0)" class="turn">上一页</span>

            <p>

                {{pdfPage}} / {{pageCount}}

            </p>

            <span @click="changePdfPage(1)" class="turn">下一页</span>

        </div>

    </div>

data() {

    return {

        loading:false,

        url:'',

        pdfPage: 1, // pdf 页码

        pageCount: 1, // pdf 总页数

        imgBaseUrl: process.env.VUE_APP_BASE_API + "/file/repository/",

      }

    },

created() {

    this.url=this.imgBaseUrl+this.pdfUrl

    this.getPage()

  },

  mounted() {

  },

  methods: {

    getPage(){

        this.loading=true

        let loadingTask = pdf.createLoadingTask(this.url);

              loadingTask.promise.then((pdf) => {

                this.pageCount = pdf._pdfInfo.numPages

                this.loading=false

              })

    },

    // 改变PDF页码,val传过来区分上一页下一页的值,0上一页,1下一页

    changePdfPage(val) {

      if (val === 0 && this.pdfPage > 1) {

        this.pdfPage--;

      }

      if (val === 1 && this.pdfPage < this.pageCount) {

        this.pdfPage++;

      }

    },

    loadPdfHandler(e){

      this.pdfPage = 1 // 加载的时候先加载第一页

    }

  },

<style lang="scss" scoped>

.arrow{

    display: flex;

    justify-content: space-around;

    span{

        cursor: pointer;

    }

}

</style>