index.vue

<template>
  <div class="pdf_container">
    <NafmHeader navClass="nafmii-head-bg3" title="详情页面">
      <template #bottom>
        <div class="header">
          <div class="header_left">
            <span class="pre" @click="handlePre">上一页</span>
            <span class="next" @click="handleNext">下一页</span>
          </div>

          <div class="center">
            <input type="text" v-model.number="inputValue" class="inputClass" @change="handleChange"> <span>/ {{pageCount}}</span>
          </div>
          <div class="header_right">
            <span class="pre" @click="handleScaleBig">放大</span>
            <span class="pre" @click="handleScaleSmall">缩小</span>
            <span class="next" @click="handleReset">重置</span>
          </div>

        </div>
      </template>
    </NafmHeader>
    <Pdf :src="src" ref="wrapper" :page="currentPage" @num-pages="pageCount = $event" @page-loaded="currentPage = $event" @loaded="onLoad" />
  </div>
</template>

<script>
import Pdf from 'vue-pdf'
export default {
  components: {
    Pdf
  },
  data() {
    return {
      inputValue: 1,
      currentPage: 0,
      pageCount: 0,
      fileUrl: `${window.location.origin}/study.pdf`,
      numPages: undefined,
      src: '',
      scale: 100,
    }
  },
  created() {
    this.src = Pdf.createLoadingTask(this.fileUrl)

  },
  mounted() {
    // this.src.promise.then(pdf => {
    //   this.numPages = pdf.numPages
    // })
    console.log('---', this.currentPage)

  },
  methods: {
    onLoad(val) {
      this.currentPage = val || 1
      this.inputValue = this.currentPage
      // this.src.then(pdf => { this.currentPage = pdf.numPages; });
      // this.src.promise.then(pdf => {
      //   this.currentPage = pdf.numPages
      // })
    },
    handlePre() {
      if (this.currentPage == 1) {
        Toast('已在第一页')
        return
      } else {
        this.currentPage--
      }
      this.inputValue = this.currentPage
    },
    handleNext() {
      if (this.currentPage == this.pageCount) {
        Toast('已在末页')
        return
      } else {
        this.currentPage++
      }
      this.inputValue = this.currentPage
    },
    pageLoad(val) {
      console.log(val, this.currentPage);
    },
    handleChange(e) {
      console.log('val-->', val)
      const val = e.target.value
      if (val > this.pageCount) {
        Toast('输入值不能大于总页数')
        this.inputValue = ''
        return
      }
      if (val < 1 || val == "" || val == '') {
        Toast('输入值小于了最小页数')
        this.inputValue = ''
        return
      }
      try {
        console.log('val', val);
        this.currentPage = Number(val)
      } catch (e) {
        console.log(e);
      }
    },
    handleScaleBig() {
      this.scale += 5;
      this.$refs.wrapper.$el.style.width = parseInt(this.scale) + "%";
    },
    handleScaleSmall() {
      if (this.scale == 100) {
        return;
      }
      this.scale += -5;
      this.$refs.wrapper.$el.style.width = parseInt(this.scale) + "%";
    },
    handleReset(){
      this.scale = 100;
      this.$refs.wrapper.$el.style.width = parseInt(this.scale) + "%";
      this.currentPage = 1
      this.inputValue = 1
    }
  }
}
</script>
<style lang="less" scoped>
.header {
  display: flex;
  height: 50px;
  align-items: center;
  .pre {
    width: 50px;
    margin-right: 5px;
  }
  .next {
    width: 50px;
  }
  .center {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.inputClass {
  width: 50px;
  color: #333;
  margin-right: 2px;
  text-align: center;
}
</style>