Create Annotations from PDF Text Search Results

15 Jul 202611 minutes to read

A concise guide that demonstrates how to add rectangle and highlight annotations to text matched by a search in the Syncfusion React PDF Viewer. The guide explains where to wire the callback and the required services.

Prerequisites

A React PDF Viewer setup with Annotation module injected.

Steps to add rectangle or highlight annotations on search result highlight

Step 1: Follow the steps provided in the Syncfusion^® Getting Started Guide to set up a basic PDF Viewer sample.

Step 2a: Add a rectangle annotation based on the bounds of each highlighted search match.

Standalone

import { RefObject, useRef } from 'react';
import {
    PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, TextSelection,
    TextSearch, FormFields, FormDesigner, PageOrganizer, Print, Inject, RectangleSettings,
    TextSearchHighlightEventArgs, RectangleBoundsModel
} from '@syncfusion/ej2-react-pdfviewer';

export default function App() {
    const viewerRef: RefObject<PdfViewerComponent> = useRef(null);

    // Method to handle the text search highlight event
    const handleTextSearchHighlight = (args: TextSearchHighlightEventArgs) => {
        console.log(args); // Logs Highlighted text search details

        const pageNumber: number = args.pageNumber;
        const bounds: RectangleBoundsModel = args.bounds;

        // Add a rectangle annotation on the highlighted text
        viewerRef.current.annotationModule.addAnnotation('Rectangle', {
            pageNumber: pageNumber,
            offset: { x: bounds.left, y: bounds.top },
            width: bounds.width,
            height: bounds.height,
        } as RectangleSettings);
    };

    // Method to initiate a text search for the term 'PDF'
    const handleSearch = () => {
        viewerRef.current.textSearchModule.searchText('PDF', false);
    };

    // Method to go to the next instance of the search term
    const handleSearchNext = () => {
        viewerRef.current.textSearchModule.searchNext();
    };

    // Method to cancel the current text search operation
    const handleCancelSearch = () => {
        viewerRef.current.textSearchModule.cancelTextSearch();
    };

    return (
        <div>
            <div style={{ marginTop: '50px' }}>
                <button onClick={handleSearch}>Search PDF</button>
                <button onClick={handleSearchNext}>Search Next</button>
                <button onClick={handleCancelSearch}>Cancel Search</button>
            </div>
            <div className='control-section' style={{ marginTop: '5px' }}>
                <PdfViewerComponent
                    ref={viewerRef}
                    id="PdfViewer"
                    textSearchHighlight={handleTextSearchHighlight}
                    documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
                    resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
                    style={{ height: '640px' }}
                >
                    <Inject services={[
                        Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch,
                        FormFields, FormDesigner, PageOrganizer, Print 
                    ]} />
                </PdfViewerComponent>
            </div>
        </div>
    );
}

Expected result: Rectangle annotations are added at text search result locations, improving visibility for users navigating search matches.

Step 2b: Add a highlight annotation based on the bounds of each highlighted search match.

Standalone

import { RefObject, useRef } from 'react';
import {
    PdfViewerComponent, Toolbar, Magnification, Navigation, Annotation, TextSelection,
    TextSearch, FormFields, FormDesigner, PageOrganizer, Print, Inject, TextSearchHighlightEventArgs,
    HighlightSettings, IAnnotationPoint
} from '@syncfusion/ej2-react-pdfviewer';

export default function App() {
    const viewerRef: RefObject<PdfViewerComponent> = useRef(null);

    // Method to handle the text search highlight event
    const handleTextSearchHighlight = (args: TextSearchHighlightEventArgs) => {
        console.log(args); // Logs Highlighted text search details

        const pageNumber: number = args.pageNumber;
        const bounds: IAnnotationPoint[] = [{
            x: args.bounds.x ?? args.bounds.left,
            y: args.bounds.y ?? args.bounds.top,
            height: args.bounds.height,
            width: args.bounds.width
        }];

        // Add a highlight annotation on the highlighted text
        viewerRef.current.annotation.addAnnotation('Highlight', {
            pageNumber: pageNumber,
            bounds: bounds
        } as HighlightSettings);
    };

    // Method to initiate a text search for the term 'PDF'
    const handleSearch = () => {
        viewerRef.current.textSearchModule.searchText('PDF', false);
    };

    // Method to go to the next instance of the search term
    const handleSearchNext = () => {
        viewerRef.current.textSearchModule.searchNext();
    };

    // Method to cancel the current text search operation
    const handleCancelSearch = () => {
        viewerRef.current.textSearchModule.cancelTextSearch();
    };

    return (
        <div>
            <div style={{ marginTop: '50px' }}>
                <button onClick={handleSearch}>Search PDF</button>
                <button onClick={handleSearchNext}>Search Next</button>
                <button onClick={handleCancelSearch}>Cancel Search</button>
            </div>
            <div className='control-section' style={{ marginTop: '5px' }}>
                <PdfViewerComponent
                    ref={viewerRef}
                    id="PdfViewer"
                    textSearchHighlight={handleTextSearchHighlight}
                    documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
                    resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
                    style={{ height: '640px' }}
                >
                    <Inject services={[
                        Toolbar, Magnification, Navigation, Annotation, TextSelection, TextSearch,
                        FormFields, FormDesigner, PageOrganizer, Print 
                    ]} />
                </PdfViewerComponent>
            </div>
        </div>
    );
}

Expected result: Highlight annotation is added at text search result locations, improving visibility for users navigating search matches.

View sample the complete working sample on GitHub