<div class="pdf" v-show="fileType === 'pdf'"><div style="height: 0.8rem;"></div><p class="arrow" style="font-size: 18px"><!-- // 上一頁 --><span@click="changePdfPage(0)"class="turn":class="{grey: currentPage==1}"style="cursor: pointer;margin-left: 1rem;">上一頁</span>{{currentPage}} / {{pageCount}}<!-- // 下一頁 --><span@click="changePdfPage(1)"class="turn":class="{grey: currentPage===pageCount}"style="cursor: pointer;">下一頁</span></p><pdfstyle="width: 90%":src="preUrl":page="currentPage"@num-pages="pageCount=$event"@page-loaded="currentPage=$event"@loaded="loadPdfHandler"></pdf></div>

methods: {
// 改變PDF頁碼,val傳過來區分上一頁下一頁的值,0上一頁,1下一頁
changePdfPage(val) {
// console.log(val)
if (val === 0 && this.currentPage > 1) {
this.currentPage–
// console.log(this.currentPage)
}
if (val === 1 && this.currentPage < this.pageCount) {
this.currentPage++
// console.log(this.currentPage)
}
},

// pdf加載時 loadPdfHandler(e) {console.log(e)this.currentPage = 1 // 加載的時候先加載第一頁 },

}

總結

以上是生活随笔為你收集整理的vue-pdf分页预览的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。