<Modal title="" v-model="previewContract" :width="1200">
<div slot="footer">
<div class="tc">
<Button @click="changePdfPage(0)" class="turn">上一页</Button>
{{contractCurrentPage}} / {{contractPageCount}}
<Button @click="changePdfPage(1)" class="turn">下一页</Button>
</div>
<Button @click="previewContract = false">取消</Button>
<Button type="primary" class="btn-warning" @click="downloadPdf">下载PDF</Button>
</div>
<div>
<pdf
:src="src"
:page="contractCurrentPage"
@num-pages="contractPageCount = $event"
@page-loaded="contractCurrentPage = $event"
@loaded="loadPdfHandler">
</pdf>
</div>
</Modal>
data() {
return {
contractPageCount: 0,
contractCurrentPage: 0,
}
},
methods: {
changePdfPage (val) {
if (val === 0 && this.contractCurrentPage > 1) {
this.contractCurrentPage--
}
if (val === 1 && this.contractCurrentPage < this.contractPageCount) {
this.contractCurrentPage++
}
},
loadPdfHandler () {
this.contractCurrentPage = 1
}
}
Vue PDF文件预览vue-pdf