vue2.0全局组件之pdf详解

更新时间：2020-05-20 08:00:01 作者：startmvc

目的：像elementUI那样注册全局组件预览pdf文件技术支持：使用火狐的pdf.jshttp://mozilla.github.io

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

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

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

编写：

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>


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

效果：