Text search in React Pdfviewer component

30 Jan 20232 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.

import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { PdfViewerComponent, Toolbar, Magnification, Navigation, LinkAnnotation, BookmarkView,
         ThumbnailView, Print, TextSelection, TextSearch, Annotation, Inject } from '@syncfusion/ej2-react-pdfviewer';
import { RouteComponentProps } from 'react-router';

export class App extends React.Component<{}, {}> {
  render() {
    return (
    <div>
      <div className='control-section'>
        {/* Render the PDF Viewer */}
        <PdfViewerComponent
          id="container"
          documentPath="PDF_Succinctly.pdf"
          enableTextSearch={true}
          serviceUrl="https://ej2services.syncfusion.com/production/web-services/api/pdfviewer"
          style={{ 'height': '640px' }}>

             <Inject services={[ Toolbar, Annotation, Magnification, Navigation, LinkAnnotation, BookmarkView,
                                 ThumbnailView, Print, TextSelection, TextSearch]} />
        </PdfViewerComponent>
      </div>
    </div>);
  }
}
ReactDOM.render(<App />, document.getElementById('sample'));

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 .

Text search in React Pdfviewer component

See also