pc端、h5在线预览pdf，使用pdfjs-dist自定义组件

“pdfjs-dist”: “^2.4.456”
vue2

<template>
  <div id="cpdf" class="cpdf">
    <div class="center">
      <div class="contor">
        <button @click="prev">上一页</button>
        <button @click="next">下一页</button>
        <span>Page: <span v-text="page_num"></span> / <span v-text="page_count"></span></span>
 
        <button @click="addscale" >加</button>
        <button @click="minus" >减</button>
        <button id="prev" @click="closepdf">关闭</button>
      </div>
      <canvas class="canvasstyle" id="the-canvas" ref='myCanvas'></canvas>
    </div>
  </div>
</template>
<script src="./index.js"></script>
<style lang="less" src="./index.less" scoped></style>

import PDFJS from 'pdfjs-dist'
import workerSrc from 'pdfjs-dist/build/pdf.worker.entry'
PDFJS.workerSrc = workerSrc;
export default {
  name: 'Pdfviewer',
  props: ['pdfurl'],
  data() {
    return {
      initData: {},
      pdfDoc: null, //pdfjs 生成的对象
      pageNum: 1,//
      pageRendering: false,
      pageNumPending: null,
      scale: 1,//放大倍数
      page_num: 0,//当前页数
      page_count: 0,//总页数
      maxscale: 2,//最大放大倍数
      minscale: 0.8//最小放大倍数
    }
  },
  components:{

  },
  computed: {
    ctx() {
      let id = document.getElementById('the-canvas')
      return id.getContext('2d');
    }
  },
  watch: {
    PdfViewerData: {
      immediate: true,
      handler(val) {
        this.initData = val
      }
    }
  },
  methods: {
    renderPage(num) {
      let vm = this;
      this.pageRendering = true;
      let canvas = document.getElementById('the-canvas')
      // Using promise to fetch the page
      this.pdfDoc.getPage(num).then(function(page){
        console.log(page)
        let viewport = page.getViewport({scale:vm.scale*0.5})
        let ctx=canvas.getContext('2d')
        //alert(vm.canvas.height)
        canvas.height = viewport.height;
        canvas.width = viewport.width;

        // Render PDF page into canvas context
        // var renderContext = {
        //   canvasContext: vm.ctx,
        //   viewport: viewport
        // };
        let renderContext = {
          canvasContext: ctx,
          viewport: viewport
        };
        var renderTask = page.render(renderContext);

        // Wait for rendering to finish
        renderTask.promise.then(function () {
          vm.pageRendering = false;
          if (vm.pageNumPending !== null) {
            // New page rendering is pending
            vm.renderPage(vm.pageNumPending);
            vm.pageNumPending = null;
          }
        });
      });
      vm.page_num = vm.pageNum;

    },
    // renderPage(num) {
    //   this.pageRendering = true;
    //   let canvas = this.$refs.myCanvas;
    //   // Using promise to fetch the page
    //   this.pdfDoc.getPage(num).then((page) => {
    //     var viewport = page.getViewport(this.scale);
    //     canvas.height = viewport.height;
    //     canvas.width = viewport.width;
    //     let ctx = canvas.getContext("2d")
    //     var renderContext = {
    //       canvasContext: ctx,
    //       viewport: viewport,
    //     };
    //     var renderTask = page.render(renderContext);
    //     renderTask.promise.then(() => {
    //       ctx.fillStyle = ctx.createPattern(
    //         this.$refs.watermark,
    //         "repeat"
    //       );
    //       ctx.fillRect(0, 0, canvas.width, canvas.height);
    //       this.pageRendering = false;
    //       if (this.pageNumPending !== null) {
    //         this.renderPage(this.pageNumPending);
    //         this.pageNumPending = null;
    //       }
    //     });
    //   });
    // },
    addscale() {//放大
      if (this.scale >= this.maxscale) {
        return
      }
      this.scale += 0.1;
      this.queueRenderPage(this.pageNum)
    },
    minus() {//缩小
      if (this.scale <= this.minscale) {
        return
      }
      this.scale -= 0.1;
      this.queueRenderPage(this.pageNum)
    },
    prev() {//上一页
      let vm = this
      if (vm.pageNum <= 1) {
        return;
      }
      vm.pageNum--;
      vm.queueRenderPage(vm.pageNum);
    },
    next() {//下一页
      let vm = this;
      if (vm.pageNum >= vm.page_count) {
        return;
      }
      vm.pageNum++;
      vm.queueRenderPage(vm.pageNum);
    },
    closepdf() {//关闭PDF
      this.$emit('closepdf')
    },
    queueRenderPage(num) {
      if (this.pageRendering) {
        this.pageNumPending = num;
      } else {
        this.renderPage(num);
      }
    }
  },
  mounted() {
    let vm = this;
    console.log(PDFJS)
    PDFJS.getDocument('http://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf').promise.then((pdf) => {
      console.log(pdf)
      vm.pdfDoc = pdf;
      vm.page_count = vm.pdfDoc._pdfInfo.numPages;
      vm.renderPage(vm.pageNum);
      // this.$nextTick(() => {
      // this.renderPage(1);
      // });
    });
  }
}