vue-pdf实现pdf文件在线预览

1.需求说明：在h5的vue项目中实现pdf展示，可以考虑引入相关依赖npm vue-pdf。

2.安装

npm install --save vue-pdf

3.pdf上下滑动展示

<template>
  <div>
    <pdf
      ref="pdf"
      v-for="i in numPages" 
      :key="i"  
      :src="url" 
      :page="i"
      ></pdf>
  </div>
</template>
<script>
import pdf from 'vue-pdf'
export default {
  components:{
      pdf
  },
  data(){
      return {
          url:"http://xxx.pdf",
          numPages: null, // pdf 总页数
      }
  },
  mounted() {
      this.getNumPages()
  },
  methods: {
    # 计算pdf页码总数
    getNumPages() {
      let loadingTask = pdf.createLoadingTask(this.url)
      loadingTask.promise.then(pdf => {
        this.numPages = pdf.numPages
      }).catch(err => {
        console.error('pdf 加载失败', err);
      })
    },
  }
</script>
总结：pdf页数过长时,加载时间过长，出现白屏。

4.pdf分页展示

<template>
  <div>
    <div v-show="showFlag">
        <div>
              <span @click="prePage">上一页</span>
              <span @click="nextPage">下一页</span>
              <div>{{ pageNum }} / {{ pageTotalNum }}</div>
        </div>
        <pdf id="pdf"
            :page="pageNum"
            :src="url"
            @progress="loadedRatio = $event"
            @num-pages="pageTotalNum=$event" 
         >
        </pdf>       
    </div>
  </div>
</template>

<script>
import pdf from "vue-pdf";
export default {
  components: {pdf},
  data() {
    return {
      showFlag:false,//页面数据未加载时不展示内容
      pageNum: 1,
      pageTotalNum: 0,
      loadedRatio: 0, 
      url:'http://xxx.pdf'     
    };
  },
  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
    }
  },
  watch:{
      pageTotalNum(val){
        if(val>=1){
          this.showFlag = true;
        }
      }
  }
};
</script>