Instance API

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.

Method	Description	Type
goToPage	To force viewer to go to the certain page	(page: number) => void

goToPage

Example

Composition TS

<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>

Composition JS

<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>

Options TS

<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>

Options JS

<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.