vue PDF预览

组件：

<template>
  <div id="container" v-if="isShow" :class="{'back': isShow}">
    <canvas id="the-canvas"></canvas>
    <div class="header" v-if='pdfDoc'>
      <button class='button change' @click="onChangeBig">+</button>
      <button class='button change' @click="onChangeSmall">-</button>
    </div>
    <span class="close" :class="{'close':isShow}" @click="closePdf">关闭</span>
    <div class="foot" v-if='pdfDoc'>
      <button class='left button' v-if="pageNum>1" @click="onPrevPage">上一页</button>
      <button class='right button' v-if="pageNum<pdfDoc.numPages" @click="onNextPage">下一页</button>
    </div>
  </div>
</template>
<script>
  import PDFJS from 'pdfjs-dist'

  export default {
    data() {
      return {
        isShow: false, //通过该属性动态添加类，让pdf显示或隐藏
        pdfDoc: null,
        pageNum: 1,
        pageRendering: false,
        pageNumPending: null,
        scale: 0.6
      }
    },
    methods: {
      closePdf() {
        this.scale = 0.6;
        this.isShow = false
      },
      showPDF(url) {
        let vm = this;
        PDFJS.getDocument(url).then(function (pdf) {
          vm.isShow = true;
          vm.pdfDoc = pdf;
          vm.renderPage(1)
        })
      },
      renderPage(num) {
        this.pageRendering = true;
        let vm = this;
        this.pdfDoc.getPage(num).then(function (page) {
          let viewport = page.getViewport(vm.scale);
          let canvas = document.getElementById('the-canvas');
          canvas.height = viewport.height;
          canvas.width = viewport.width;

          // Render PDF page into canvas context
          let renderContext = {
            canvasContext: canvas.getContext('2d'),
            viewport: viewport
          };
          let 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
              this.renderPage(vm.pageNumPending);
              vm.pageNumPending = null
            }
          })
        })
      },
      queueRenderPage(num) {
        if (this.pageRendering) {
          this.pageNumPending = num
        } else {
          this.renderPage(num)
        }
      },
      onChangeBig(){
        this.scale += 0.1;
        if(this.scale < 0.1){
          this.scale = 0.1
        }
        this.renderPage(this.pageNum);
      },
      onChangeSmall(){
        this.scale -= 0.1;
        this.renderPage(this.pageNum);
      },
      onPrevPage() {
        if (this.pageNum <= 1) {
          return
        }
        this.pageNum--;
        this.queueRenderPage(this.pageNum)
      },
      onNextPage() {
        if (this.pageNum >= this.pdfDoc.numPages) {
          return
        }
        this.pageNum++;
        this.queueRenderPage(this.pageNum)
      }
    }
  }
</script>

<style scoped>
  .header{
    position: fixed;
    top: 15px;
    left: 30px;
  }
  .change{
    width: 60px;
    margin: 0 20px;
  }
  .close{
    position: fixed;
    color: #929292;
    top: 15px;
    right: 15px;
  }
  .back {
    background-color: #fff;
    position: fixed;
    display: inline-block;
    width: 100%;
    height: 101%;
    top: 0;
    left: 0;
    text-align: center;
    z-index: 110;
    overflow: scroll;
  }
  .foot {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translate(-50%, 0)
  }
  .button{
    border: none;
    color: #fff;
    background: #396fc7;
    border-radius: .533vw;
  }
  .right{
    margin-left: 40px;
  }
</style>

js：

import PDF from './PDF'

let $vm;
export default {
  install (Vue, options) {
    if (!$vm) {
      const PDFPlugin = Vue.extend(PDF);
      $vm = new PDFPlugin().$mount();
      document.body.appendChild($vm.$el)
    }
    Vue.prototype.$showPDF = function (url) {
      $vm.showPDF(url)
    }
  }
}

引入;

直接调用：this.$showPDF(‘url’)