目的：像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>
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
},
}
效果：
npm :有人关注 那么我就发到 npm 上。 地址 https://www.npmjs.com/package/vueshowpdf
本文已被整理到了《Vue.js前端组件学习教程》，欢迎大家学习阅读。
关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
标签：
vue2.0,全局组件,pdf
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！
如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
狼山资源网 Copyright www.pvsay.com
暂无“vue2.0全局组件之pdf详解”评论...
P70系列延期，华为新旗舰将在下月发布
3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。
而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。