目的:像elementUI那样注册全局组件预览pdf文件
技术支持:使用火狐的pdf。js http://mozilla.github.io/pdf.js/
准备:新建一个CPdf.vue文件,把火狐演示里面里的构建面的pdf.js下载来,并且依赖了elementUI开发的其实就是用了& lt; el-button>
编写:
模板
& lt; template>
& lt; div类=癱pdf”比;
& lt; div类="中心"的在
& lt; div类=癱ontor”比;
& lt; el-button @click="上一页"在上一页& lt;/el-button>
& lt; el-button @click=跋乱桓觥北?下一页& lt;/el-button>,,,,
& lt; span>页面:& lt;跨度v-text=皃age_num祝辞& lt;/span>/& lt;跨度v-text=" page_count "祝辞& lt;/span> & lt;/span>
,,,,
& lt; el-button @click=癮ddscale”图标=?”祝辞& lt;/el-button>
& lt; el-button @click=?”图标=?”祝辞& lt;/el-button>
& lt; el-button id="上一页" @click=癱losepdf祝辞关闭& lt;/el-button>
& lt;/div>
& lt;帆布类=" canvasstyle " id=盎肌弊４? lt;/canvas>
& lt;/div>
& lt;/div>
& lt;/template>
js
从“. ./. ./. ./进口PDFJS静态/pdf/pdf.js”
进口{
mapActions,
mapGetters
从“vuex”};
出口默认{
名称:“c-pdf”,
道具:[' pdfurl '),
数据(){
返回{
pdfDoc: null,//pdfjs生成的对象
pageNum: 1、//pageRendering:假的,
pageNumPending:空,
规模:1.2//放大倍数
page_num: 0,//当前页数
page_count: 0,//总页数
maxscale: 2//最大放大倍数
minscale: 0.8//最小放大倍数
}
},
方法:{
renderPage (num){//渲染pdf
让vm=这
这一点。pageRendering=true;
让帆布=. getelementbyid(“画布”)//获取页面使用承诺
this.pdfDoc.getPage (num),然后(函数(页面){
var视窗=page.getViewport (vm.scale);//警报(vm.canvas.height)
画布。身高=viewport.height;
画布。宽度=viewport.width;//呈现PDF页面到画布背景
var renderContext={
canvasContext: vm.ctx,
视图:视图
};
var renderTask=page.render (renderContext);//等待渲染完成
renderTask.promise.then(函数(){
vm。pageRendering=false;
如果(vm)。pageNumPending !==null) {//新页面呈现悬而未决
vm.renderPage (vm.pageNumPending);
vm。pageNumPending=零;
}
});
});
vm。page_num=vm.pageNum;
},
addscale(){//放大
如果这一点。规模在=this.maxscale) {
返回
}
这一点。规模+=0.1;
this.queueRenderPage (this.pageNum)
},
-(){//缩小
如果这一点。规模& lt;=this.minscale) {
返回
}
这一点。规模-=0.1;
this.queueRenderPage (this.pageNum)
},
上一页(){//上一页
让vm=这
如果(vm)。pageNum & lt;=1) {
返回;
}
vm.pageNum——;
vm.queueRenderPage (vm.pageNum);
},
next(){//下一页
让vm=这
如果(vm)。pageNum祝辞=vm.page_count) {
返回;
}
vm.pageNum + +;
vm.queueRenderPage (vm.pageNum);
},
closepdf(){//关闭PDF
美元。发出(“closepdf”)
},
queueRenderPage (num) {
如果(this.pageRendering) {
这一点。pageNumPending=num;
其他}{
this.renderPage (num);
}
}
},
计算:{
ctx () {
让id=. getelementbyid(“画布”)
返回id.getContext (2 d);
}
},
安装(){
让vm=这
PDFJS.getDocument (vm.pdfurl),然后(函数(pdfDoc_){//初始化pdf
vm。pdfDoc=pdfDoc_;
vm。page_count=vm.pdfDoc.numPages
vm.renderPage (vm.pageNum);
});
}
}
之前
样式少
.cpdf {
位置:固定;
上图:0;
左:0;
background - color: rgba (0, 0, 0, 0。5);
宽度:100%;
高度:100%;
z - index: 99999;
显示:flex;
justify-content:中心;
对齐项目:中心;
.center {
text-align:中心;
高度:100%;
溢出:汽车;
padding-top: 20 px;
.contor {
margin-bottom: 10 px;
}
}
}
之前
注册到全局:在主要。js引入CPdf.vue
Vue.component (CPdf.name CPdf)
之前
