使用vue-pdf
安裝：npm install vue-pdf --save -D
代碼示例
previewPdf.vue
<template>
<Modal title="預(yù)覽" v-model="modalVisible" @on-visible-change="modalVisiblechange" :width="900">
<div class="pdf">
<pdf ref="pdf"
:src="src"
:page="pageNum"
@num-pages="pageTotalNum=$event"
@page-loaded="pageLoaded($event)"></pdf>
</div>
<div slot="footer">
<Button type="primary" @click.stop="prePage">上一頁</Button>
<Button type="primary" @click.stop="nextPage">下一頁</Button>
<Button @click="modalVisible = false" type="primary">關(guān)閉</Button>
</div>
</Modal>
</template>
import pdf from 'vue-pdf'
export default {
components:{pdf},
data(){
return{
modalVisible：false，
src：'',
pageNum:1,
pageTotalNum:1
}
},
methods:{
pageLoaded(e){
this.curPageNum = e
},
prePage(){
var p = this.pageNum
p = p>1?p-1:this.pageTotalNum
this.pageNum = p
},
nextPage(){
var p = this.pageNum
p = p<this.pageTotalNum?p+1:1
this.pageNum = p
}
}
}
</script>
