vue+iview下pdf预览

1.安装 npm install --save vue-pdf

2.在需要使用的页面引入pdf：import pdf from 'vue-pdf'

 3.在需要使用的使用组件就行

 <pdf

            ref="pdf"

            :src="pdfView"

            :page="pageNum"

            :rotate="pageRotate"

            @progress="loadedRatio = $event"

            @page-loaded="pageLoaded($event)"

            @num-pages="pageTotalNum=$event"

            @error="pdfError($event)"

            @link-clicked="page = $event"

          ></pdf>

参数定义：

 // pdf预览

      pageNum: 1,

      pageTotalNum: 1,

      pageRotate: 0,

      // 加载进度

      loadedRatio: 0,

      curPageNum: 0,

      footerHide: true,

      pdfView: '',

      pdfShow: false，

方法：

  // 上一页函数，

    prePage () {

      var page = this.pageNum

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

      this.pageNum = page

    },

    // 下一页函数

    nextPage () {

      this.$refs.scollElement.scrollTop = 0

      var page = this.pageNum

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

      this.pageNum = page

    },

    // 页面加载回调函数，其中e为当前页数

    pageLoaded (e) {

      this.curPageNum = e

    },

    // 其他的一些回调函数。

    pdfError (error) {

      console.error(error)

    },

点击事件，判断当点击的文件后缀是pdf的时候就打开预览

if ('pdf'.indexOf(suffix) !== -1) {

        fetch({

          url: `${this.viewUrlVideo}/${id}`,

          method: 'get'

        }).then((res1) => {

          let src = pdf.createLoadingTask(res1.data.viewUrl)

          this.pdfView = src

          this.pdfShow = true

        })

      }