vue-pdf使用demo

<template>
  <div class="moduleIntro">
    <el-button-group>
      <el-button type="primary" icon="el-icon-arrow-left" size="small" @click="prePage">上一页</el-button>
      <el-button type="primary" size="small" @click="nextPage">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
    </el-button-group>
    <div style="margin-top: 10px; color: #409EFF; text-align: center">{{ currentPage }} / {{ pageCountNum }}</div>
    <pdf
      :page="currentPage"
      :src="pdfUrl"
      @progress="loadedRatio = $event"
      @num-pages="pageCountNum = $event"
    ></pdf>
  </div>
</template>
<script>
import pdf from 'vue-pdf'
export default {
  name: 'moduleIntro',
  components: {
    pdf
  },
  data(){
    return{
      currentPage: 1,
      pageCountNum: 0, //# 总页数
      loadedRatio: 0, //# 当前页面的加载进度，范围是0-1 ，等于1的时候代表当前页已经完全加载完成了
      pdfUrl:'http://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf',
    }
  },
  methods:{
    // 上一页
    prePage() {
      let page = this.currentPage
      page = page > 1 ? page - 1 : this.pageCountNum
      this.currentPage = page
    },

    // 下一页
    nextPage() {
      let page = this.currentPage
      page = page < this.pageCountNum ? page + 1 : 1
      this.currentPage = page
    }
  }
}
</script>