Overview
Instance APIs are methods in the VPV component that can be called to manipulate VPV. These methods are exposed using Vue's defineExpose()
and can be accessed in a parent component using ref
. This allows parent components to interact with the VPV component directly.
Name | Description | Type | Version |
---|---|---|---|
goToPage | To force the viewer to go to a certain page. | (page: number) => void | ^1.0.0Deprecated in ^1.5.0 |
pageControl | Page controller | pageControl | ^1.5.0 |
printControl | Print controller | printControl | ^1.5.0 |
rotateControl | Rotate Controller | rotateControl | ^1.5.0 |
searchControl | Search controller | searchControl | ^1.4.0 |
goToPage Deprecated in ^1.5.0
Example
vue
<script setup lang="ts">
import { VPdfViewer } from '@vue-pdf-viewer/viewer';
import { ref } from 'vue';
// Create a ref to hold the VPdfViewer component
const vpvRef = ref<InstanceType<typeof VPdfViewer> | null>(null);
// Function to navigate to a specific page
const goToDesiredPage = () => {
if (!vpvRef.value) {
return;
}
vpvRef.value.goToPage(3); // Specify the desired page number
}
</script>
<template>
<button @click="goToDesiredPage">Go</button>
<div :style="{ width: '1028px', height: '700px' }">
<VPdfViewer
ref="vpvRef"
src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
/>
</div>
</template>
vue
<script setup>
import { VPdfViewer } from '@vue-pdf-viewer/viewer';
import { ref } from 'vue';
// Create a ref to hold the VPdfViewer component
const vpvRef = ref(null);
// Function to navigate to a specific page
const goToDesiredPage = () => {
if (!vpvRef.value) {
return;
}
vpvRef.value.goToPage(3); // Specify the desired page number
}
</script>
<template>
<button @click="goToDesiredPage">Go</button>
<div :style="{ width: '1028px', height: '700px'}">
<VPdfViewer
ref="vpvRef"
src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
/>
</div>
</template>
vue
<script lang="ts">
import { defineComponent } from 'vue'
import { VPdfViewer } from '@vue-pdf-viewer/viewer';
export default defineComponent({
components: { VPdfViewer },
data() {
return {
pdfFileSource: "https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
}
},
methods: {
goToDesiredPage(page: number) {
this.$refs.vpvRef?.goToPage(3); // Specify the desired page number
}
}
})
</script>
<template>
<button @click="goToDesiredPage">Go</button>
<div :style="{ width: '1028px', height: '700px'}">
<VPdfViewer
ref="vpvRef"
:src="pdfFileSource"
/>
</div>
</template>
vue
<script>
import { VPdfViewer } from '@vue-pdf-viewer/viewer';
export default {
components: { VPdfViewer },
data() {
return {
pdfFileSource: "https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
}
},
methods: {
goToDesiredPage(page) {
this.$refs.vpvRef?.goToPage(3); // Specify the desired page number
}
}
}
</script>
<template>
<button @click="goToDesiredPage">Go</button>
<div :style="{ width: '1028px', height: '700px'}">
<VPdfViewer
ref="vpvRef"
:src="pdfFileSource"
/>
</div>
</template>
If you need additional exposed functions, please feel free to contact us directly or initiate a discussion in our GitHub.