vue2.0全局组件之pdf详解

前端之家收集整理的这篇文章主要介绍了vue2.0全局组件之pdf详解前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

目的:像elementUI那样注册全局组件 预览pdf文件

技术支持:使用火狐的pdf.js

准备:新建一个CPdf.vue文件,把火狐demo里面的build里面的pdf.js下载来,并且依赖了elementUI开发的其实就是用了

编写:

template

Page: /
  <el-button @click="addscale" icon="plus"&gt;</el-button>
  <el-button @click="minus" icon="minus"&gt;</el-button>
  <el-button id="prev" @click="closepdf"&gt;关闭</el-button>
 </div>
 <canvas class="canvasstyle" id="the-canvas"&gt;</canvas>

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

style less

注册到全局:在main.js 引入CPdf.vue

使用:在想预览pdf文件的组件里面

isshowpdf:false,testpdfurl:'//cdn.mozilla.net/pdfjs/tracemonkey.pdf' }

},methods: {

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

效果:

npm :有人关注 那么我就发到 npm 上。 地址

本文已被整理到了《》,欢迎大家学习阅读。

关于vue.js组件的教程,请大家点击专题进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

原文链接:https://www.f2er.com/vue/38344.html

猜你在找的Vue相关文章