Text search in Vue Pdfviewer component
28 Sep 20233 minutes to read
The Text Search option in PDF Viewer is used to find and highlight the text content from the document. You can enable/disable the text search using the following code snippet.
<template>
<div id="app">
<ejs-pdfviewer
id="pdfViewer"
:documentPath="documentPath"
:enableTextSearch="true">
</ejs-pdfviewer>
</div>
</template>
<script>
import Vue from 'vue';
import { PdfViewerPlugin, Toolbar, Magnification, Navigation,
LinkAnnotation, BookmarkView, Annotation, ThumbnailView,
Print, TextSelection, TextSearch } from '@syncfusion/ej2-vue-pdfviewer';
Vue.use(PdfViewerPlugin);
export default {
name: 'app',
data () {
return {
documentPath:"https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
};
},
provide: {
PdfViewer: [ Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
Annotation, ThumbnailView, Print, TextSelection, TextSearch ]},
}
</script><template>
<div id="app">
<ejs-pdfviewer
id="pdfViewer"
:serviceUrl="serviceUrl"
:documentPath="documentPath"
:enableTextSearch="true">
</ejs-pdfviewer>
</div>
</template>
<script>
import Vue from 'vue';
import { PdfViewerPlugin, Toolbar, Magnification, Navigation,
LinkAnnotation, BookmarkView, Annotation, ThumbnailView,
Print, TextSelection, TextSearch } from '@syncfusion/ej2-vue-pdfviewer';
Vue.use(PdfViewerPlugin);
export default {
name: 'app',
data () {
return {
serviceUrl:"https://services.syncfusion.com/vue/production/api/pdfviewer",
documentPath:"https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
};
},
provide: {
PdfViewer: [ Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
Annotation, ThumbnailView, Print, TextSelection, TextSearch ]},
}
</script>The following text search methods are available in the PDF Viewer,
- Search text:- Searches the target text in the PDF document and highlights the occurrences in the pages.
- Search next:- Searches the next occurrence of the searched text from the current occurrence of the PdfViewer.
- Search previous:- Searches the previous occurrence of the searched text from the current occurrence of the PdfViewer.
- Cancel text search:- The text search can be cancelled and the highlighted occurrences from the PDF Viewer can be removed .
