js

<div class="jb51code">
<pre class="brush: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,//放大倍数
  page_num: 0,//当前页数
  page_count: 0,//总页数
  maxscale: 2,//最大放大倍数
  minscale: 0.8//最小放大倍数
 }

},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);
});
}
}