vue 在线浏览pdf

vue-pdf基本用法：

<pdf

        ref="pdf"

        :src="pdfSrc"

        :page="pageNum"

        :rotate="pageRotate"

        @password="password"

        @progress="loadedRatio = $event"

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

        @num-pages="pageTotalNum = $event"

        @error="pdfError($event)"

        @link-clicked="page = $event"

      >

      </pdf>

 <div class="flx pdf-btn">

      <button

        class="btn-def btn-pre"

        @click.stop="prePage"

        :disabled="preDisable"

      >

        上一页

      </button>

      <button

        class="btn-def btn-next"

        @click.stop="nextPage"

        :disabled="nextDisable"

      >

        下一页

      </button>

      <!-- <button @click="fileDownload(pdfUrl)">下载</button> -->

    </div>

mounted(){

 // PDF地址是后台反的若是转码则需要解码

    if (this.pdfObj.isUrl == "x") {

      this.pdfSrc = decodeURIComponent(this.pdfObj.url);

      this.name = this.pdfObj.name;

    } else {

      this.pdfSrc = this.pdfObj.url;

      this.show = false;

      this.name = this.pdfObj.name;

    }

}

// 上一页

    prePage() {

      var p = this.pageNum;

      p = p > 1 ? p - 1 : this.pageTotalNum;

      this.pageNum = p;

    },

    // 下一页

    nextPage() {

      var p = this.pageNum;

      p = p < this.pageTotalNum ? p + 1 : 1;

      this.pageNum = p;

    },

//页面加载

pageLoaded(e) {

      this.curPageNum = e;

    },

// 错误

    pdfError(error) {

      console.error(error);

    },