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 相关文章推荐
[原创]静态页面也可以实现预览 列表不同的显示方式
Oct 14 Javascript
javascript的对话框详解与参数
Mar 08 Javascript
Mootools 1.2教程 正则表达式
Sep 15 Javascript
jQuery Ajax之load()方法
Oct 12 Javascript
iframe子页面获取父页面元素的方法
Nov 05 Javascript
Bootstrap按钮组件详解
Apr 26 Javascript
详解Vue组件实现tips的总结
Nov 01 Javascript
React路由管理之React Router总结
May 10 Javascript
微信小程序之swiper滑动面板用法示例
Dec 04 Javascript
JavaScript变量作用域及内存问题实例分析
Jun 10 Javascript
微信小程序基于Taro的分享图片功能实践详解
Jul 12 Javascript
原生js实现下拉选项卡
Nov 27 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
浅谈json_encode用法
2015/03/05 PHP
PDO::exec讲解
2019/01/28 PHP
微信公众平台开发教程②微信端分享功能图文详解
2019/04/10 PHP
js 自定义的联动下拉框
2010/02/07 Javascript
一次失败的jQuery优化尝试小结
2011/02/06 Javascript
解决js中window.open弹出的是上次的缓存页面问题
2013/12/29 Javascript
javascript 3d 逐侦产品展示(核心精简)
2014/03/26 Javascript
jQuery弹出层插件Lightbox_me使用指南
2015/04/21 Javascript
js创建jsonArray传输至后台及后台全面解析
2016/04/11 Javascript
JS实现左右无缝轮播图代码
2016/05/01 Javascript
Bootstrap基本模板的使用和理解1
2016/12/14 Javascript
原生JS实现图片翻书效果
2017/02/16 Javascript
微信小程序 两种为对象属性赋值的方式详解
2017/02/23 Javascript
nodejs爬虫遇到的乱码问题汇总
2017/04/07 NodeJs
JavaScript Canvas绘制圆形时钟效果
2020/08/20 Javascript
bootstrap响应式表格实例详解
2017/05/15 Javascript
vue实现多个元素或多个组件之间动画效果
2018/09/25 Javascript
Vue项目中ESlint规范示例代码
2019/07/04 Javascript
部署vue+Springboot前后端分离项目的步骤实现
2020/05/31 Javascript
[36:20]KG vs SECRET 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
使用python实现拉钩网上的FizzBuzzWhizz问题示例
2014/05/05 Python
跟老齐学Python之永远强大的函数
2014/09/14 Python
python实现提取百度搜索结果的方法
2015/05/19 Python
在Python程序中操作文件之flush()方法的使用教程
2015/05/24 Python
机器学习经典算法-logistic回归代码详解
2017/12/22 Python
pytorch 转换矩阵的维数位置方法
2018/12/08 Python
python发送多人邮件没有展示收件人问题的解决方法
2019/06/21 Python
在python中利用numpy求解多项式以及多项式拟合的方法
2019/07/03 Python
python如何给字典的键对应的值为字典项的字典赋值
2019/07/05 Python
python 读取更新中的log 或其它文本方式
2019/12/24 Python
python:批量统计xml中各类目标的数量案例
2020/03/10 Python
《灯光》教学反思
2014/02/08 职场文书
党员评议表自我评价范文
2014/10/20 职场文书
个人求职自荐信范文
2015/03/06 职场文书
死者家属慰问信
2015/03/24 职场文书
windows10声卡驱动怎么安装?win10声卡驱动安装操作步骤教程
2022/08/05 数码科技