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代码自动插入方式
Dec 22 Javascript
学习ExtJS(一) 之基础前提
Oct 07 Javascript
javascript打印html内容功能的方法示例
Nov 28 Javascript
深入剖析JavaScript:Object类型
May 10 Javascript
浅谈js for循环输出i为同一值的问题
Mar 01 Javascript
详解JS异步加载的三种方式
Mar 07 Javascript
less简单入门(CSS 预处理语言)
Mar 08 Javascript
Vue2路由动画效果的实现代码
Jul 10 Javascript
移动端滑动切换组件封装 vue-swiper-router实例详解
Nov 25 Javascript
JS数组中对象去重操作示例
Jun 04 Javascript
vue-autoui自匹配webapi的UI控件的实现
Mar 20 Javascript
vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容操作
Jul 22 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
php+curl 发送图片处理代码分享
2015/07/09 PHP
给PHP开发者的编程指南 第一部分降低复杂程度
2016/01/18 PHP
PHP编写RESTful接口的方法
2016/02/21 PHP
thinkPHP框架动态配置用法实例分析
2018/06/14 PHP
thinkphp 5框架实现登陆,登出及session登陆状态检测功能示例
2019/10/10 PHP
Javascript----文件操作
2007/01/18 Javascript
解决extjs在firefox中关闭窗口再打开后iframe中js函数访问不到的问题
2008/11/06 Javascript
js 处理URL实用技巧
2010/11/23 Javascript
Javascript 中 null、NaN和undefined的区别总结
2013/04/10 Javascript
jquery和js实现对div的隐藏和显示方法
2014/09/26 Javascript
node.js中的fs.createWriteStream方法使用说明
2014/12/17 Javascript
极易被忽视的javascript面试题七问七答
2016/02/15 Javascript
vue.js移动数组位置,同时更新视图的方法
2018/03/08 Javascript
详解Element-UI中上传的文件前端处理
2019/08/07 Javascript
jQuery实现轮播图源码
2019/10/23 jQuery
聊聊Vue中provide/inject的应用详解
2019/11/10 Javascript
JavaScript switch语句使用方法简介
2019/12/30 Javascript
[37:37]DAC2018 4.4 淘汰赛 Optic vs Mineski 第二场
2018/04/05 DOTA
听歌识曲--用python实现一个音乐检索器的功能
2016/11/15 Python
python更改已存在excel文件的方法
2018/05/03 Python
Python操作Excel插入删除行的方法
2018/12/10 Python
python pandas时序处理相关功能详解
2019/07/03 Python
Python pandas RFM模型应用实例详解
2019/11/20 Python
关于Python-faker的函数效果一览
2019/11/28 Python
在python中利用dict转json按输入顺序输出内容方式
2020/02/27 Python
html5使用Canvas绘图的使用方法
2017/11/21 HTML / CSS
世界上最受欢迎的花店:1-800-Flowers.com
2020/06/01 全球购物
个人自我评价分享
2013/12/20 职场文书
打架检讨书100字
2014/01/19 职场文书
幼儿园开学寄语
2014/04/03 职场文书
法制宣传标语集锦
2014/06/25 职场文书
2014党员批评和自我批评思想汇报
2014/09/21 职场文书
2014年惩防体系建设工作总结
2014/12/01 职场文书
学校元旦晚会开场白
2015/05/29 职场文书
2016大学军训通讯稿
2015/11/25 职场文书
分享Python获取本机IP地址的几种方法
2022/03/17 Python