Page Controller >=1.5.0
pageControl
Name | Description | Type |
---|---|---|
goToPage | To force the viewer to go to a certain page | (page: number) => void |
currentPage | Returns the page number of the current page | number |
totalPages | Returns the total number of pages for a PDF document | number |
vue
<script setup lang="ts">
import { VPVInstance, VPdfViewer } from '@vue-pdf-viewer/viewer'
import { ref, computed } from 'vue'
// Create a ref to hold the VPdfViewer component
const vpvRef = ref<VPVInstance | null>(null)
const pageControl = computed(() => vpvRef.value?.pageControl)
const nextPage = () => {
const isLastPage = pageControl.value?.currentPage === pageControl.value?.totalPages
if (isLastPage) {
return
}
pageControl.value?.goToPage(pageControl.value?.currentPage + 1)
}
const prevPage = () => {
const isFirstPage = pageControl.value?.currentPage === 1
if (isFirstPage) {
return
}
pageControl.value?.goToPage(pageControl.value?.currentPage - 1)
}
const afterGoToPage = (page: number) => {
console.log('gotoPage', page)
}
</script>
<template>
<div id="vpv" class="w-full md:w-[80%] lg:w-[90%] h-[1490px] mx-auto">
<div>
<button @click="prevPage">Prev</button>
</div>
<div>
<button @click="nextPage">Next</button>
</div>
<div :style="{ width: '1028px', height: '700px' }">
<VPdfViewer
@afterGoToPage="afterGoToPage"
ref="vpvRef"
src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
/>
</div>
</div>
</template>
vue
<script setup>
import { VPdfViewer } from '@vue-pdf-viewer/viewer'
import { ref, computed } from 'vue'
// Create a ref to hold the VPdfViewer component
const vpvRef = ref(null)
const pageControl = computed(() => vpvRef.value?.pageControl)
const nextPage = () => {
const isLastPage = pageControl.value?.currentPage === pageControl.value?.totalPages
if (isLastPage) {
return
}
pageControl.value?.goToPage(pageControl.value?.currentPage + 1)
}
const prevPage = () => {
const isFirstPage = pageControl.value?.currentPage === 1
if (isFirstPage) {
return
}
pageControl.value?.goToPage(pageControl.value?.currentPage - 1)
}
const afterGoToPage = (page) => {
console.log('gotoPage', page)
}
</script>
<template>
<div id="vpv" class="w-full md:w-[80%] lg:w-[90%] h-[1490px] mx-auto">
<div>
<button @click="prevPage">Prev</button>
</div>
<div>
<button @click="nextPage">Next</button>
</div>
<div :style="{ width: '1028px', height: '700px' }">
<VPdfViewer
@afterGoToPage="afterGoToPage"
ref="vpvRef"
src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
/>
</div>
</div>
</template>
vue
<script lang="ts">
import { VPdfViewer, VPVInstance } from '@vue-pdf-viewer/viewer'
import { ref, computed, defineComponent } from 'vue'
export default defineComponent({
components: { VPdfViewer },
setup() {
// Create a ref to hold the VPdfViewer component
const vpvRef = ref<VPVInstance>()
const pageControl = computed(() => vpvRef.value?.pageControl)
const nextPage = () => {
const isLastPage = pageControl.value?.currentPage === pageControl.value?.totalPages
if (isLastPage) {
return
}
pageControl.value?.goToPage(pageControl.value?.currentPage + 1)
}
const prevPage = () => {
const isFirstPage = pageControl.value?.currentPage === 1
if (isFirstPage) {
return
}
pageControl.value?.goToPage(pageControl.value?.currentPage - 1)
}
const afterGoToPage = (page: number) => {
console.log('gotoPage', page)
}
return {
vpvRef,
nextPage,
prevPage,
afterGoToPage
}
}
})
</script>
<template>
<div id="vpv" class="w-full md:w-[80%] lg:w-[90%] h-[1490px] mx-auto">
<div>
<button @click="prevPage">Prev</button>
</div>
<div>
<button @click="nextPage">Next</button>
</div>
<div :style="{ width: '1028px', height: '700px' }">
<VPdfViewer
@afterGoToPage="afterGoToPage"
ref="vpvRef"
src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
/>
</div>
</div>
</template>
vue
<script>
import { VPdfViewer } from '@vue-pdf-viewer/viewer'
import { ref, computed } from 'vue'
export default {
components: { VPdfViewer },
setup() {
// Create a ref to hold the VPdfViewer component
const vpvRef = ref()
const pageControl = computed(() => vpvRef.value?.pageControl)
const nextPage = () => {
const isLastPage = pageControl.value?.currentPage === pageControl.value?.totalPages
if (isLastPage) {
return
}
pageControl.value?.goToPage(pageControl.value?.currentPage + 1)
}
const prevPage = () => {
const isFirstPage = pageControl.value?.currentPage === 1
if (isFirstPage) {
return
}
pageControl.value?.goToPage(pageControl.value?.currentPage - 1)
}
const afterGoToPage = (page) => {
console.log('gotoPage', page)
}
return {
vpvRef,
nextPage,
prevPage,
afterGoToPage
}
}
}
</script>
<template>
<div id="vpv" class="w-full md:w-[80%] lg:w-[90%] h-[1490px] mx-auto">
<div>
<button @click="prevPage">Prev</button>
</div>
<div>
<button @click="nextPage">Next</button>
</div>
<div :style="{ width: '1028px', height: '700px' }">
<VPdfViewer
@afterGoToPage="afterGoToPage"
ref="vpvRef"
src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
/>
</div>
</div>
</template>