PDF文件Web端展示

<div>
      <pdf
        :src="src"
        :page="currentPage"
        @progress="loadedRatio = $event"
        @num-pages="pageCount = $event"
        @page-loaded="currentPage = $event"
        style="display: inline-block; width: 100%">
      </pdf>
      <ul class="btns">
        <li :class="{select:idx==2}" @touchstart="idx=2" @touchend="idx=-1" @click="changePdfPage(0)">
          <p class="up-p">上一页</p>
        </li>
        <li :class="{select:idx==3}" @touchstart="idx=3" @touchend="idx=-1" @click="changePdfPage(1)">
          <p class="down-p">下一页</p>
        </li>
        <li>
          <p>当前第{{ currentPage }}页/共{{ pageCount }}页</p>
        </li>
      </ul>
    </div>

import pdf from 'vue-pdf'

//····················如要切换显示pdf，则需要初始化this.currentPage = 1

export default {
  components: {
    pdf
  },

  data(){
    return{
      src: "",
      currentPage: 1, // 当前页码
      pageCount: 0, // 总页码
      scale: 100,
      idx: -1,
      loadedRatio: 0,
    }
  },


　created() {
	this.src = this.unitlist[0].url//pdf地址
                this.src = pdf.createLoadingTask(this.src)
　},
  methods:{
    changePdfPage(val) {
      if(val === 0 && this.currentPage > 1) {
        this.currentPage--;
      }
      if(val === 1 && this.currentPage < this.pageCount) {
        this.currentPage++;
      }
    },
  },

<style lang="less" scoped>
.btns{
  display: flex;
  justify-content: flex-end;
  li{
    margin: 0 15px;
    list-style: none;
  }
  .up-p, .down-p{
    cursor: pointer;
  }
}
</style>

标签：src,Web,currentPage,val,展示,pageCount,flex,PDF,pdf
来源： https://blog.csdn.net/weixin_54757930/article/details/120516032