uniProject/components/u-pdf/u-pdf.vue

<template>
  <view class="pdf-page">
    <view class="pdf-wrap" :style="{'height':viewHeight}">
      <view ref="pdfRef" id="pdfView"></view>
    </view>
    <view v-if="showBottom" class="pdf-btn-group">
      <slot>
        <button class="btn-readed" size="mini" @click="handleComplete"
            :disabled="btnDisabled">{{showTimer ? countTimer<=1 ? '':'('+countTimer+'s)':''}}我已阅读</button>
      </slot>
    </view>
  </view>
</template>

<script>
  import Pdfh5 from "pdfh5";
  import "pdfh5/css/pdfh5.css";
  export default {
    name: "u-pdf",
    props: {
      url: {
        type: String,
        require: true
      },
      viewHeight: {
        type: String,
        default: "100%"
      },
      showBottom: {
        type: Boolean,
        default: true
      },
      options: {
        type: Object,
        default: () => ({
          cMapUrl: "https://unpkg.com/pdfjs-dist@3.8.162/cmaps/",
          lazy: false,
          withCredentials: true,
          // pdfLoaded:false,
          renderType: "svg",
          maxZoom: 3, //手势缩放最大倍数 默认3
          scrollEnable: true, //是否允许pdf滚动
          zoomEnable: true //是否允许pdf手势缩放
        })
      },
      disabled:{
        type:Boolean,
        default:true
      },
      showTimer:Boolean
    },
    data() {
      return {
        totalNum: 0,
        pdfh5: undefined,
        countTimer:10,
        timer:undefined,
        btnDisabled:true
      }
    },
    
    watch:{
      disabled(n,o){
        this.btnDisabled = this.disabled
      },
      showTimer(n,o){
        console.log("showTimer ",n);
        if(this.showTimer){
          this.startCountDownTimer()
        }
      }
    },

    mounted() {
      this.$nextTick(() => {
        this.loadPdf()
      })
    },

    // onPageScroll(scroll) {
    //   console.log(`onPageScroll ${scroll}`,scroll);
    // },

    // onReachBottom(scroll) {
    //   console.log(`onReachBottom 滚动到底部`);
    // },

    methods: {
      handleComplete(){
        this.$emit("onClickReader")
      },
      
      startCountDownTimer(){
        this.timer= setInterval(()=>{
          if(this.countTimer<=1){
            this.btnDisabled=false
            clearInterval(this.timer)
          }else{
            this.countTimer--
          }
        },1000)
      },
      
      loadPdf() {
        if (!this.url) {
          console.error("pdf url is null ");
          return;
        }
        const opts = {
          pdfurl: this.url,
          ...this.options
        }
        console.log(opts);
        this.pdfh5 = new Pdfh5('#pdfView', opts);
        // 准备加载pdf
        this.pdfh5.on("ready", () => {
          this.$emit("ready")
        })
        //pdf 监听完成事件
        this.pdfh5.on("complete", (status, msg, time) => {
          console.log(`PDF complete status=${status}, msg =${msg}`);
          this.$emit("complete", { status, msg })
        });
        // pdf 滚动事件 Svg 方式不会执行此方法， 需要在page中监听 onReachBottom，onPageScroll
        this.pdfh5.on("scroll", (scrollTop, currentNum) => {
          console.log(`pdf scrollTop =${scrollTop} , currentNum =${currentNum}`);
          this.$emit("scroll", { scrollTop, currentNum })
        });
      }
    }
  }
</script>

<style scoped>
  @import 'pdfh5/css/pdfh5.css';

  .pdf-page {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .pdf-wrap {
    width: 100%;
    flex: 1;
  }

  .pdf-btn-group {
    width: 100%;
    border-top: 2rpx solid #F8F9FC;
    height: 8%;
    position: fixed;
    bottom: -1rpx;
    z-index: 999;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .btn-readed {
    background: #4E70F6;
    color: #ffffff;
    font-size: 32rpx;
  }
</style>