vue展示pdf

主要使用了vue-pdf

<template>
  <div style="height: 100%">
    <div style="height: calc(100% - 30px); padding: 15px; position:relative">
      <div
        style="height: 96%; overflow: auto; border: 1px solid #dcdcdc;"
        @mouseover="handleMouseenter"
        @mouseout="handleMouseLeave"
      >
        <div
          :style="{
            width: pdfScale + '%',
          }"
        >
          <pdf
            :page="pageNum"
            :src="pdfUrl"
            @progress="loadedRatio = $event"
            @num-pages="pageTotalNum = $event"
            ref="wrapper"
          ></pdf>
        </div>
        <el-button
          @mouseenter="handleMouseenter"
          v-show="isPdfPagerShow"
          class="pdf-page"
          icon="el-icon-arrow-left"
          size="mini"
          @click="prePage"
          style="left: calc(2rem + 1px); z-index: 99999"
        ></el-button>
        <el-button
          @mouseenter="handleMouseenter"
          v-show="isPdfPagerShow"
          class="pdf-page"
          icon="el-icon-arrow-right"
          size="mini"
          @click="nextPage"
          style="right: calc(1rem + 12px); z-index: 99999"
        ></el-button>
      </div>
      <div
        class="show-pdf-bottom"
        style="display: flex; height: 4%; align-items: center; margin-top: 0.5rem"
      >
        <div class="pdf-bottom-page" style="flex: 1; display: flex; text-align: left">
          <div
            style="
              width: 55%;
              border: 1px solid #dcdcdc;
              display: flex;
              align-items: center;
              justify-content: center;
              height: 2.4rem;
              border-radius: 5px;
            "
          >
            {{ pageNum }} / {{ pageTotalNum }}
          </div>
        </div>
        <div
          class="pdf-bottom-scale"
          style="display: flex; text-align: left; justify-content: flex-end"
        >
          <div
            style="
              width: 20%;
              display: flex;
              align-items: center;
              justify-content: flex-end;
              font-size: 0.93rem;
            "
          >
            {{ $t('zoom') }}
          </div>
          <el-button style="width: 20%" @click="minusPdfFun">
            <i class="el-icon-minus"></i>
          </el-button>
          <el-input v-model="pdfScaleInput" readonly style="width: 30%; display: flex"></el-input>
          <el-button style="width: 20%" @click="plusPdfFun">
            <i class="el-icon-plus"></i>
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import pdf from 'vue-pdf'

export default {
  name: 'Pdf',
  components: {
    pdf,
  },
  props: {  //接收父组件传来的pdf路径
    pdfUrl: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      // pdfUrl: 'https://dakaname.oss-cn-hangzhou.aliyuncs.com/file/2018-12-28/1546003237411.pdf',//测试路径
      pageNum: 1,
      pageTotalNum: 1, //总页数
      loadedRatio: 0, //当前页面的加载进度，范围是0-1 ，等于1的时候代表当前页已经完全加载完成了

      pdfScale: 100,
      pageRotate: 0,
      isPdfPagerShow: false,
      pdfScaleInput: 0,
    }
  },
  methods: {
    // 上一页
    prePage() {
      let page = this.pageNum
      page = page > 1 ? page - 1 : this.pageTotalNum
      this.pageNum = page
    },

    // 下一页
    nextPage() {
      let page = this.pageNum
      page = page < this.pageTotalNum ? page + 1 : 1
      this.pageNum = page
    },
    handleMouseenter() {
      this.isPdfPagerShow = true
    },
    handleMouseLeave() {
      this.isPdfPagerShow = false
    },
    minusPdfFun() {
      if (this.pdfScaleInput <= 1) {
        return
      }
      this.pdfScaleInput -= 5
      this.scaleX()
    },
    plusPdfFun() {
      if (this.pdfScaleInput >= 100) {
        return (this.pdfScaleInput = 100)
      }
      this.pdfScaleInput += 5

      this.scaleD()
    },
    //放大
    scaleD(resetNum) {
      //返回重置  使用resetNum置为100
      if (resetNum) return (this.$refs.wrapper.$el.style.width = resetNum + '%')
      this.pdfScale += 5
      this.$refs.wrapper.$el.style.width = parseInt(this.pdfScale) + '%'
    },
    //缩小
    scaleX() {
      if (this.pdfScale == 100) {
        return
      }
      this.pdfScale += -5
      this.$refs.wrapper.$el.style.width = parseInt(this.pdfScale) + '%'
    },
  },
}
</script>

<style scoped>
/deep/ .show-pdf-bottom .el-input__inner {
  font-size: 0.93rem;
  text-align: center;
}
/deep/ .show-pdf-bottom i {
  font-size: 0.93rem;
  font-weight: bold;
}
.pdf-page {
  position: absolute;
  top: 40%;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  background: transparent;
  color: #333333;
  background-color: #ffffff;
  border-color: #dcdcdc;
}
.pdf-page:focus {
  color: #333333;
  background-color: #ffffff;
  border-color: #dcdcdc;
}
/deep/.el-button,
.el-button {
  color: #409eff !important;
  border-color: #c6e2ff !important;
  background-color: #ecf5ff !important;
}
::-webkit-scrollbar {
  width: 10px; 
  height: 10px;
}

::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(#fff,#fff,#fff,0.3);
  border-radius: 10px;
	background-color: #F5F5F5;
}


::-webkit-scrollbar-thumb
{
	-webkit-box-shadow: inset 0 0 6px #ccc;
  border-radius: 10px;
	background-color: #ccc;
}
</style>