Vue使用vue-pdf实现pdf在线浏览

1. 前言
今天在项目看到在线浏览pdf，也不知道怎么实现的，于是我上网查资料，感觉vue-pdf比较简单，适合我这个小菜逼，对于刚入门前端的小白实现在线浏览pdf是有一丢丢帮助的，废话不多说，开干。

2. vue-pdf官网
https://www.npmjs.com/package/vue-pdf（全是英文看又看不懂，只能切换英中来回切换）

3. 安装

npm install --save vue-pdf

注意路径。别在桌面调出来个终端安装了，这种直接打回去重学Vue（菜X）。

4. pdf 页面显示

• code

<template>
    <div>
      <pdf 
        ref="pdf"
        :src="url"
      >
      </pdf>
    </div>
</template>
<script>
import pdf from 'vue-pdf'
export default {
  components:{
      pdf
  },
  data(){
      return {
          url:"http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf",
      }
  }
</script>

到这里感觉实现了，就出去点了一支烟庆祝一下，回来的时候准备欣赏一下作品时，问题来了，只显示了一张

5. pdf 显示多页

• code
  多页面的话使用循环呀，简单粗暴（如何不知道循环的还是打回去重学vue）

<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://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf",
      numPages: null,
    };
  },
  created() {
    this.getNumPages();
  },
  methods: {
    getNumPages(url) {
      let loadingTask = pdf.createLoadingTask(this.url);
      loadingTask.promise
        .then((pdf) => {
          this.numPages = pdf.numPages;
        })
        .catch((err) => {
          console.error("pdf 加载失败", err);
        });
    },
  },
};
</script>

问题所在：页数少的话，只有几页，那没什么问题。但是页数多的话问题就来了，比如说有一个pdf页数有一千页，一下子加载完成，浏览器会出现加载的状态，体验感差。
解决方法：使用按需加载的方式实现，开干。

6. pdf 按页预览

• code

<template>
  <div>
    <button @click="prePage">上一页</button>
    <button @click="nextPage">下一页</button>
    <div style="margintop: 10px; color: #409eff">
      {{ pageNum }} / {{ pageTotalNum }}
    </div>
    <pdf
      :page="pageNum"
      :src="url"
      @progress="loadedRatio = $event"
      @num-pages="pageTotalNum = $event"
    ></pdf>
  </div>
</template>
<script>
import pdf from "vue-pdf";
export default {
  components: {
    pdf,
  },
  data() {
    return {
      url: "http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf",
      pageNum: 1,
      pageTotalNum: 1, //总页数
      loadedRatio: 0, //当前页面的加载进度，范围是0-1 ，等于1的时候代表当前页已经完全加载完成了
    };
  },
  created() {},
  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;
    },
  },
};
</script>