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
vue
<script setup lang="ts">
import { VPdfViewer, type VPVInstance } from '@vue-pdf-viewer/viewer';
import { ref } from 'vue';
// Create a ref to hold the VPdfViewer component
const vpvRef = ref<VPVInstance | null>(null);
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" class="w-full md:w-[80%] lg:w-[90%] h-[1490px] mx-auto">
<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: '1028px', height: '700px' }">
<VPdfViewer
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 } 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" class="w-full md:w-[80%] lg:w-[90%] h-[1490px] mx-auto">
<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: '1028px', height: '700px' }">
<VPdfViewer
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 } 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<VPVInstance | null>(null)
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" class="w-full md:w-[80%] lg:w-[90%] h-[1490px] mx-auto">
<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: '1028px', height: '700px' }">
<VPdfViewer
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 { 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" class="w-full md:w-[80%] lg:w-[90%] h-[1490px] mx-auto">
<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: '1028px', height: '700px' }">
<VPdfViewer
ref="vpvRef"
src="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
/>
</div>
</div>
</template>