vue2.0全局組件之pdf詳解

更新時間：2017年06月26日 11:15:34 作者：云翳1895

這篇文章主要為大家詳細紹了vue2.0全局組件之pdf的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下

目的：像elementUI那樣注冊全局組件預覽pdf文件

技術支持：使用火狐的pdf.js http://mozilla.github.io/pdf.js/

準備：新建一個CPdf.vue文件，把火狐demo里面的build里面的pdf.js下載來,并且依賴了elementUI開發(fā)的其實就是用了<el-button>

編寫：

template

<template>
  <div class="cpdf">
   <div class="center">
     <div class="contor">
      <el-button @click="prev">上一頁</el-button>
      <el-button @click="next">下一頁</el-button> &nbsp; &nbsp;
      <span>Page: <span v-text="page_num"></span> / <span v-text="page_count"></span></span>
      &nbsp; &nbsp;
      <el-button @click="addscale" icon="plus"></el-button>
      <el-button @click="minus" icon="minus"></el-button>
      <el-button id="prev" @click="closepdf">關閉</el-button>
     </div>
     <canvas class="canvasstyle" id="the-canvas"></canvas>
   </div>
  </div>
</template>

js

 import PDFJS from '../../../static/pdf/pdf.js'
  import {
   mapActions,
   mapGetters
  } from 'vuex';
  export default {
   name: 'c-pdf',
   props: ['pdfurl'],
   data() {

     return {
      pdfDoc: null, //pdfjs 生成的對象
      pageNum: 1,//
      pageRendering: false,
      pageNumPending: null,
      scale: 1.2,//放大倍數(shù)
      page_num: 0,//當前頁數(shù)
      page_count: 0,//總頁數(shù)
      maxscale: 2,//最大放大倍數(shù)
      minscale: 0.8//最小放大倍數(shù)
     }
   },
   methods: {
     renderPage(num) { //渲染pdf
      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) {
        var viewport = page.getViewport(vm.scale);
        //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
        };
        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;

     },
     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);
      }
     }
   },
   computed: {
     ctx() {
      let id = document.getElementById('the-canvas')
      return id.getContext('2d');
     }
   },
   mounted() {
     let vm = this
     PDFJS.getDocument(vm.pdfurl).then(function(pdfDoc_) { //初始化pdf
      vm.pdfDoc = pdfDoc_;
      vm.page_count = vm.pdfDoc.numPages
      vm.renderPage(vm.pageNum);
     });
   }
  }

style less

 .cpdf {
   position: fixed;
   top: 0;
   left: 0;
   background-color: rgba(0, 0, 0, .5);
   width: 100%;
   height: 100%;
   z-index: 99999;
   display: flex;
   justify-content: center;
   align-items: center;
   .center {
     text-align: center;
     height: 100%;
     overflow: auto;
     padding-top: 20px;
     .contor {
      margin-bottom: 10px;
     }
   }
  }

注冊到全局：在main.js 引入CPdf.vue

Vue.component(CPdf.name, CPdf)

使用：在想預覽pdf文件的組件里面

<c-pdf @closepdf="closepdf" v-show="isshowpdf" :pdfurl="testpdfurl"></c-pdf>

data() {
     return {
      
      isshowpdf:false,
      testpdfurl:'//cdn.mozilla.net/pdfjs/tracemonkey.pdf'
     }
   },
methods: {

     closepdf(){
      this.isshowpdf=false
     },
}

效果：