vue2.0全局组件之pdf详解


Posted in Javascript onJune 26, 2017

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

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

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

vue2.0全局组件之pdf详解

编写:

template

<template>
  <div class="cpdf">
   <div class="center">
     <div class="contor">
      <el-button @click="prev">上一页</el-button>
      <el-button @click="next">下一页</el-button>    
      <span>Page: <span v-text="page_num"></span> / <span v-text="page_count"></span></span>
         
      <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,//放大倍数
      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

.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
     },
}

效果:

 vue2.0全局组件之pdf详解

npm :有人关注 那么我就发到 npm 上。 地址 https://www.npmjs.com/package/vueshowpdf

本文已被整理到了《Vue.js前端组件学习教程》,欢迎大家学习阅读。

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
创建一个复制UBB软件信息的链接或按钮的js代码
Jan 06 Javascript
js下写一个事件队列操作函数
Jul 19 Javascript
JavaScript中奇葩的假值示例应用
Mar 11 Javascript
AngularJS入门教程之Hello World!
Dec 06 Javascript
jQuery中:reset选择器用法实例
Jan 04 Javascript
jQuery实现模仿微博下拉滚动条加载数据效果
Dec 25 Javascript
基于Angularjs实现分页功能
May 30 Javascript
详解JS中遍历语法的比较
Apr 07 Javascript
vue 中自定义指令改变data中的值
Jun 02 Javascript
jQuery之动画ajax事件(实例讲解)
Jul 18 jQuery
babel的使用及安装配置教程
Feb 22 Javascript
小程序hover-class点击态效果实现
Feb 26 Javascript
JavaScript创建对象的七种方式(推荐)
Jun 26 #Javascript
基于 webpack2 实现的多入口项目脚手架详解
Jun 26 #Javascript
JavaScript的六种继承方式(推荐)
Jun 26 #Javascript
JavaScript数据类型和变量_动力节点Java学院整理
Jun 26 #Javascript
JavaScript基本语法_动力节点Java学院整理
Jun 26 #Javascript
JavaScript条件判断_动力节点Java学院整理
Jun 26 #Javascript
JavaScript脚本语言是什么_动力节点Java学院整理
Jun 26 #Javascript
You might like
ThinkPHP让分页保持搜索状态的方法
2014/07/02 PHP
php抽象类用法实例分析
2015/07/07 PHP
php计算title标题相似比的方法
2015/07/29 PHP
全新Mac配置PHP开发环境教程
2016/02/03 PHP
PHP中如何判断exec函数执行成功?
2016/08/04 PHP
微信公众号开发之语音消息识别php代码
2016/08/08 PHP
jquery 简单的进度条实现代码
2010/03/11 Javascript
基于jQuery的输入框无值自动显示指定数据的实现代码
2011/01/24 Javascript
ie下$.getJSON出现问题的解决方法
2014/02/12 Javascript
[将免费进行到底]在Amazon的一年免费服务器上安装Node.JS, NPM和OurJS博客
2014/08/18 Javascript
node.js+Ajax实现获取HTTP服务器返回数据
2014/11/26 Javascript
JS实现简易图片轮播效果的方法
2015/03/25 Javascript
AngularJS基础学习笔记之简单介绍
2015/05/10 Javascript
AngularJS基础 ng-focus 指令简单示例
2016/08/01 Javascript
js时间控件只显示年月
2017/01/08 Javascript
JavaScript优化以及前段开发小技巧
2017/02/02 Javascript
详解vue.js移动端导航navigationbar的封装
2017/07/05 Javascript
vue单元格多列合并的实现
2020/11/26 Vue.js
[06:16]《DAC最前线》之地区预选赛全面回顾
2015/01/19 DOTA
python文件操作相关知识点总结整理
2016/02/22 Python
Python使用tablib生成excel文件的简单实现方法
2016/03/16 Python
【Python】Python的urllib模块、urllib2模块批量进行网页下载文件
2016/11/19 Python
python实现简易云音乐播放器
2018/01/04 Python
Python及Django框架生成二维码的方法分析
2018/01/31 Python
Python使用uuid库生成唯一标识ID
2020/02/12 Python
如何基于Python按行合并两个txt
2020/11/03 Python
详解CSS3:overflow属性
2020/11/17 HTML / CSS
机电工程专业应届生求职信
2013/10/03 职场文书
公共艺术专业自荐信
2014/09/01 职场文书
地方课程教学计划
2015/01/19 职场文书
2019最新版股权转让及委托持股协议书范本
2019/08/07 职场文书
nginx对http请求处理的各个阶段详析
2021/03/31 Servers
Python机器学习之逻辑回归
2021/05/11 Python
Python 高级库15 个让新手爱不释手(推荐)
2021/05/15 Python
JVM之方法返回地址详解
2022/02/28 Java/Android
排查Tomcat进程假死的问题
2022/05/06 Servers