vue-pdf - APP中预览pdf

vue-pdf

<template>
  <div id="displayPdf">
    <pdf
      ref="wrapper"
      :page="pageNum"
      :src="url"
      @progress="loadedRatio = $event"  
      @num-pages="pageTotalNum = $event"
    ></pdf>

    <div class="bottom">
      <div class="page">{{ pageNum }} / {{ pageTotalNum }}</div>
      <div class="button">
        <div @click="prePage">上一页</div>
        <div @click="nextPage">下一页</div>
      </div>
    </div>
  </div>
</template>

<script>
import pdf from "vue-pdf";

export default {
  name: "",
  components: {
    pdf
  },
  data() {
    return {
      url: "",
      pageNum: 1,
      scale: 100,
      pageTotalNum: 1, // 总页数
      loadedRatio: 0 // 当前页面的加载进度，范围是0-1 ，等于1的时候代表当前页已经完全加载完成了
    };
  },
  created() {
    this.url = this.$route.meta.url;
  },
  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;
    },

    //放大
    scaleD() {
      this.scale += 100;
      this.$refs.wrapper.$el.style.width = parseInt(this.scale) + "%";
    }
  }
};
</script>

vue-pdf-signature (出现乱码时，网上发现了这种写法)

<template>
  <div id="displayPdf">
    <pdf
       ref="wrapper"
      :page="pageNum"
      :src="url"
      @progress="loadedRatio = $event"
      @num-pages="pageTotalNum = $event"
    ></pdf>
    ......

  </div>
</template>

<script>
import pdf from "vue-pdf-signature";
import CMapReaderFactory from "vue-pdf-signature/src/CMapReaderFactory";

export default {
  name: "",
  components: {
    pdf
  },
  data() {
    return {
      url: "",
      pageNum: 1,
      scale: 100,
      pageTotalNum: 1, // 总页数
      loadedRatio: 0 // 当前页面的加载进度，范围是0-1 ，等于1的时候代表当前页已经完全加载完成了
    };
  },
  created() {
    this.url = pdf.createLoadingTask({
      //接口中的url地址用createLoadingTask方法
      url: this.$route.meta.url,
      cMapPacked: true,
      CMapReaderFactory
    });
  },

  ......
};
</script>