1. 程式人生 > >vue PDF預覽

vue PDF預覽

元件:

<template>
<div id="container" v-if="isShow" :class="{'back': isShow}">
<canvas id="the-canvas"></canvas>
<div class="header" v-if='pdfDoc'>
<button class='button change' @click="onChangeBig">+</button>
<button class='button change' @click="onChangeSmall">-</button>
</div>
<span class="close" :class="{'close':isShow}" @click="closePdf">關閉</span>
<div class="foot" v-if='pdfDoc'>
<button class='left button' v-if="pageNum>1" @click="onPrevPage">上一頁</button>
<button class='right button' v-if="pageNum<pdfDoc.numPages" @click="onNextPage">下一頁</button>
</div>
</div>
</template>
<script>
import PDFJS from 'pdfjs-dist'

export default {
data() {
return {
isShow: false, //通過該屬性動態新增類,讓pdf顯示或隱藏
pdfDoc: null,
pageNum: 1,
pageRendering: false,
pageNumPending: null,
scale: 0.6
}
},
methods: {
closePdf() {
this.scale = 0.6;
this.isShow = false
},
showPDF(url) {
let vm = this;
PDFJS.getDocument(url).then(function (pdf) {
vm.isShow = true;
vm.pdfDoc = pdf;
vm.renderPage(1)
})
},
renderPage(num) {
this.pageRendering = true;
let vm = this;
this.pdfDoc.getPage(num).then(function (page) {
let viewport = page.getViewport(vm.scale);
let canvas = document.getElementById('the-canvas');
canvas.height = viewport.height;
canvas.width = viewport.width;

// Render PDF page into canvas context
let renderContext = {
canvasContext: canvas.getContext('2d'),
viewport: viewport
};
let 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
this.renderPage(vm.pageNumPending);
vm.pageNumPending = null
}
})
})
},
queueRenderPage(num) {
if (this.pageRendering) {
this.pageNumPending = num
} else {
this.renderPage(num)
}
},
onChangeBig(){
this.scale += 0.1;
if(this.scale < 0.1){
this.scale = 0.1
}
this.renderPage(this.pageNum);
},
onChangeSmall(){
this.scale -= 0.1;
this.renderPage(this.pageNum);
},
onPrevPage() {
if (this.pageNum <= 1) {
return
}
this.pageNum--;
this.queueRenderPage(this.pageNum)
},
onNextPage() {
if (this.pageNum >= this.pdfDoc.numPages) {
return
}
this.pageNum++;
this.queueRenderPage(this.pageNum)
}
}
}
</script>

<style scoped>
.header{
position: fixed;
top: 15px;
left: 30px;
}
.change{
width: 60px;
margin: 0 20px;
}
.close{
position: fixed;
color: #929292;
top: 15px;
right: 15px;
}
.back {
background-color: #fff;
position: fixed;
display: inline-block;
width: 100%;
height: 101%;
top: 0;
left: 0;
text-align: center;
z-index: 110;
overflow: scroll;
}
.foot {
position: fixed;
bottom: 30px;
left: 50%;
transform: translate(-50%, 0)
}
.button{
border: none;
color: #fff;
background: #396fc7;
border-radius: .533vw;
}
.right{
margin-left: 40px;
}
</style>

js:
import PDF from './PDF'

let $vm;
export default {
install (Vue, options) {
if (!$vm) {
const PDFPlugin = Vue.extend(PDF);
$vm = new PDFPlugin().$mount();
document.body.appendChild($vm.$el)
}
Vue.prototype.$showPDF = function (url) {
$vm.showPDF(url)
}
}
}

引入;
直接呼叫:this.$showPDF(‘url’)