vue 在线预览pdf

vue 在线预览pdf

使用了vue-pdf插件，页面初始的loading使用了vant UI 的loading。

<template>
    <div class="wrap">
      <template v-if="loadingTask">
        <pdf
          v-for="i in pageTotalNum"
          :key="i"
          :page="i"
          :src="loadingTask"
          @progress="progress"
        ></pdf>
      </template>
      <van-loading v-if="hasLoading" type="spinner" color="#1989fa" />
    </div>
</template>
<script>
import pdf from 'vue-pdf'
export default {
  name: 'HelloWorld',
  components:{
    pdf
  },
  data () {
    return {
      url: '',
      loadingTask: '',
      // pageNum: 1,
      pageTotalNum: 1,
      // loadedRatio: 0, // 当前页面的加载进度，范围是0-1 ，等于1的时候代表当前页已经完全加载完成了
      loadedPag: 0,
      hasLoading: true
    }
  },
  mounted () {
    let href= window.location.href
    if (href.split('?').length > 1) {
      let str = href.split('?')[1].split('&')[0].split('=')
      if (str.length > 1) {
        this.url = decodeURIComponent(str[1])
        // this.getNumPages()
      } else {
        alert('网页地址没有携带url参数')
      }
    } else {
      alert('网页地址没有携带参数')
    }
    // 生产是这样访问页面的： http://abc.com/#/?url=http://abc.com/2.pdf
    // 本地测试 把pdf文件放到和当前组件同路径即可
    this.url = './2021111707.pdf'
    this.getNumPages()
  },
  methods: {
    // // 计算pdf页码总数
    getNumPages() {
      if (!this.url) {
        return false
      }
      this.loadingTask = pdf.createLoadingTask(this.url)
      this.loadingTask.promise.then(pdf => {
        this.pageTotalNum = pdf.numPages
        console.log('pageTotalNum：', this.pageTotalNum)
        this.closeLoading(3000)
      }).catch(err => {
        console.error('pdf 加载失败', err);
        this.closeLoading(3000)
      })
    },
    // 貌似没用了
    progress (val) {
      console.log(val)
      if (val >=1) {
        this.loadedPag++
        console.log(this.loadedPag)
        if (this.loadedPag >= this.pageTotalNum) {
          this.closeLoading(500)
        }
      }
    },
    closeLoading(speed) {
      setTimeout(() => {
        this.hasLoading = false
      }, speed)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.wrap {
  width: 100vw; height: 100vh; position: relative;
}
.van-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>