vue2.0全局组件之pdf详解

vue2.0全局组件之pdf详解

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

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

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

编写：

template

上一页

下一页    

Page: /

关闭

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.queueRenderPOKcdxage(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 http://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文件的组件里面

data() {

return {

isshowpdf:false,

testpdfurl:'//cdn.mozilla.net/pdfjs/tracemonkey.pdf'

}

},

methods: {

closepdf(){

this.isshowpdf=false

},

}

效果：

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

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

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。