Search Controller

searchControl

Name	Description	Type
goToMatch	To force the viewer to go to a match index	(index: number) => void
nextSearchMatch	To go to the next match of a keyword highlight	() => void
search	To find a specific string in a PDF document	(value: string) => void
searching	To provide the searching status	Ref<boolean>
searchMatches	The total number of search matches	Ref<{totalMatches: number; matches: {index: number; page: number}[]}>
prevSearchMatch	To go to the previous match of a keyword highlight	() => void

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>>();
  const searchValue = ref<string>('')
  const searchControl = computed(() => vpvRef.value?.searchControl)
  const nextSearchMatch = () => {
    searchControl.value?.nextSearchMatch()
  }
  const prevSearchMatch = () => {
    searchControl.value?.prevSearchMatch()
  }
  const search = () => {
    searchControl.value?.search(searchValue.value)
  }
  const goToMatch = () => {
    searchControl.value?.goToMatch(3)
  }
</script>
<template>
  <div id="vpv">
    <div>
      <button @click="nextSearchMatch">next</button>
    </div>
    <div>
      <button @click="prevSearchMatch">prev</button>
    </div>
    <div>
      <button @click="goToMatch">go to match 2</button>
    </div>
    <input v-model="searchValue" />
    <button @click="search">search</button>
    <div>
      searching
      {{ searchControl?.searching }}
    </div>
    <div>
      totalSearchMatch
      {{ searchControl?.searchMatches?.totalMatches }}
    </div>
    <div :style="{ width: '100%', height: '100%' }">
      <VPdfViewer
        ref="vpvRef"
        src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
      />
    </div>
  </div>
</template>
<style scoped>
#vpv {
  width: 100%;
  height: 1490px;
  margin: 0 auto;
}
@media (max-width: 992px) {
  #vpv {
    width: 85%;
  }
}
@media (max-width: 1028px) {
  #vpv {
    width: 70%;
  }
}

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);
  const searchValue = ref('')
  const searchControl = computed(() => vpvRef.value?.searchControl)
  const nextSearchMatch = () => {
    searchControl.value?.nextSearchMatch()
  }
  const prevSearchMatch = () => {
    searchControl.value?.prevSearchMatch()
  }
  const search = () => {
    searchControl.value?.search(searchValue.value)
  }
  const goToMatch = () => {
    searchControl.value?.goToMatch(3)
  }
</script>
<template>
  <div id="vpv">
    <div>
      <button @click="nextSearchMatch">next</button>
    </div>
    <div>
      <button @click="prevSearchMatch">prev</button>
    </div>
    <div>
      <button @click="goToMatch">go to match 2</button>
    </div>
    <input v-model="searchValue" />
    <button @click="search">search</button>
    <div>
      searching
      {{ searchControl?.searching }}
    </div>
    <div>
      totalSearchMatch
      {{ searchControl?.searchMatches?.totalMatches }}
    </div>
    <div :style="{ width: '100%', height: '100%' }">
      <VPdfViewer
        ref="vpvRef"
        src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
      />
    </div>
  </div>
</template>
<style scoped>
#vpv {
  width: 100%;
  height: 1490px;
  margin: 0 auto;
}
@media (max-width: 992px) {
  #vpv {
    width: 85%;
  }
}
@media (max-width: 1028px) {
  #vpv {
    width: 70%;
  }
}

Options TS

<script lang="ts">
  import { VPdfViewer } from '@vue-pdf-viewer/viewer';
  import { computed, defineComponent, ref } from 'vue'

export default defineComponent({
  components: { VPdfViewer },
  setup() {
    // Create a ref to hold the VPdfViewer component
    const vpvRef = ref<InstanceType<typeof VPdfViewer>>()
    const searchValue = ref<string>('')
    const searchControl = computed(() => vpvRef.value?.searchControl)
    const nextSearchMatch = () => {
      searchControl.value?.nextSearchMatch()
    }
    const prevSearchMatch = () => {
      searchControl.value?.prevSearchMatch()
    }
    const search = () => {
      searchControl.value?.search(searchValue.value)
    }
    const goToMatch = () => {
      searchControl.value?.goToMatch(2)
    }
    return {
      vpvRef,
      searchValue,
      searchControl,
      nextSearchMatch,
      prevSearchMatch,
      search,
      goToMatch
    }
  },
  data() {
    return {
      pdfFileSource:
        'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf'
    }
  }
})
</script>
<template>
  <div id="vpv">
    <div>
      <button @click="nextSearchMatch">next</button>
    </div>
    <div>
      <button @click="prevSearchMatch">prev</button>
    </div>
    <div>
      <button @click="goToMatch">go to match 2</button>
    </div>
    <input v-model="searchValue" />
    <button @click="search">search</button>
    <div>
      searching
      {{ searchControl?.searching }}
    </div>
    <div>
      totalSearchMatch
      {{ searchControl?.searchMatches?.totalMatches }}
    </div>
    <div :style="{ width: '100%', height: '100%' }">
      <VPdfViewer
        ref="vpvRef"
        src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
      />
    </div>
  </div>
</template>
<style scoped>
#vpv {
  width: 100%;
  height: 1490px;
  margin: 0 auto;
}
@media (max-width: 992px) {
  #vpv {
    width: 85%;
  }
}
@media (max-width: 1028px) {
  #vpv {
    width: 70%;
  }
}

Options JS

<script>
  import { VPdfViewer } from '@vue-pdf-viewer/viewer';
  import { computed, ref } from 'vue'

export default {
  components: { VPdfViewer },
  setup() {
    // Create a ref to hold the VPdfViewer component
    const vpvRef = ref(null)
    const searchValue = ref('')
    const searchControl = computed(() => vpvRef.value?.searchControl)
    const nextSearchMatch = () => {
      searchControl.value?.nextSearchMatch()
    }
    const prevSearchMatch = () => {
      searchControl.value?.prevSearchMatch()
    }
    const search = () => {
      searchControl.value?.search(searchValue.value)
    }
    const goToMatch = () => {
      searchControl.value?.goToMatch(2)
    }
    return {
      vpvRef,
      searchValue,
      searchControl,
      nextSearchMatch,
      prevSearchMatch,
      search,
      goToMatch
    }
  },
  data() {
    return {
      pdfFileSource:
        'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf'
    }
  }
}
</script>
<template>
  <div id="vpv">
    <div>
      <button @click="nextSearchMatch">next</button>
    </div>
    <div>
      <button @click="prevSearchMatch">prev</button>
    </div>
    <div>
      <button @click="goToMatch">go to match 2</button>
    </div>
    <input v-model="searchValue" />
    <button @click="search">search</button>
    <div>
      searching
      {{ searchControl?.searching }}
    </div>
    <div>
      totalSearchMatch
      {{ searchControl?.searchMatches?.totalMatches }}
    </div>
    <div :style="{ width: '100%', height: '100%' }">
      <VPdfViewer
        ref="vpvRef"
        src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
      />
    </div>
  </div>
</template>
<style scoped>
#vpv {
  width: 100%;
  height: 1490px;
  margin: 0 auto;
}
@media (max-width: 992px) {
  #vpv {
    width: 85%;
  }
}
@media (max-width: 1028px) {
  #vpv {
    width: 70%;
  }
}