技术支持：使用火狐的pdf.js
准备：新建一个CPdf.vue文件，把火狐demo里面的build里面的pdf.js下载来,并且依赖了elementUI开发的其实就是用了
编写：
template
<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>js
<div class="jb51code">
<pre class="brush: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
注册到全局：在main.js 引入CPdf.vue
使用：在想预览pdf文件的组件里面
isshowpdf:false,testpdfurl:'//cdn.mozilla.net/pdfjs/tracemonkey.pdf'
}
},methods: {
closepdf(){
this.isshowpdf=false
},}效果：
本文已被整理到了《》，欢迎大家学习阅读。
关于vue.js组件的教程，请大家点击专题进行学习。
