Search a keyword and annotate it programmatically

Technical Support
1

PDF.js Express Version
6.2.1

Detailed description of issue
I have gone through the documentation and setup pdf.js with Vue. For searching a keyword and annotating it programmatically, I have referred the Advanced Search APIs and the sample given(here /documentation/search/advanced-search). The code is the same as the one given in the example. I am getting error when I call the function textSearchInit. Screenshot for reference: https://nimb.ws/A8ZVkR

Please guide me if something is missing or what went wrong here.

Expected behaviour
The keywords mentioned in the code must be searched and annotated as provided.

Does your issue happen with every document, or just one?
I have tried with the default document

Link to document

Code snippet

WebViewer({ 
        path: this.path,
        initialDoc: this.url,
        enableAnnotations: true
      },
      this.$refs.viewer).then((instance) => {
       

    const { docViewer, CoreControls, annotManager } = instance;
   

    docViewer.on('documentLoaded', () => {

    const searchMode = docViewer.SearchMode.e_page_stop;

    const searchOptions = {
      fullSearch: true,
      onResult: (result) => {

        const textQuad = result.quads[0].getPoints();
        const annot = new Annotations.TextHighlightAnnotation();

        annot.X = textQuad.x1;
        annot.Width = textQuad.x2 - textQuad.x1;

        annot.Y = textQuad.y3;
        annot.Height = textQuad.y1 - textQuad.y3;

        annot.FillColor = new Annotations.Color(0, 0, 255, 0.5);
        annot.StrokeColor = new Annotations.Color(0, 0, 255, 0.5);

        annot.Quads = [textQuad];

        annotManager.addAnnotation(annot);
        annotManager.drawAnnotationsFromList([annot])

      }
    }

   

    // start the search
    docViewer.textSearchInit('the', searchMode, searchOptions);
  })
        
})
2

Hello, I’m Ron, an automated tech support bot :robot:

While you wait for one of our customer support representatives to get back to you, please check out some of these documentation pages:

3

Hey there!

it looks like the code snippet on that guide is missing a few steps (my mistake).

This code should work for you:

  const { docViewer, CoreControls, annotManager, Annotations } = instance;

  docViewer.on('documentLoaded', () => {

    // Set search modes. See the API reference for more information
    const searchMode = CoreControls.Search.Mode.PAGE_STOP | CoreControls.Search.Mode.HIGHLIGHT;;

    const searchOptions = {
      fullSearch: true // search the full document,
      onResult: (result) => {
        if (result.resultCode === CoreControls.Search.ResultCode.FOUND) {

          if (!result.quads.length) return;

          console.log(result);

          const textQuad = result.quads[0].getPoints();
          const annot = new Annotations.TextHighlightAnnotation();
  
          annot.X = textQuad.x1;
          annot.Width = textQuad.x2 - textQuad.x1;
          annot.PageNumber = result.pageNum;
          annot.Y = textQuad.y3;
          annot.Height = textQuad.y1 - textQuad.y3;
  
          annot.FillColor = new Annotations.Color(0, 0, 255, 0.5);
          annot.StrokeColor = new Annotations.Color(0, 0, 255, 0.5);
  
          annot.Quads = [textQuad];
  
          annotManager.addAnnotation(annot);
          annotManager.drawAnnotationsFromList([annot])
        }
      }
    }

    // start the search
    docViewer.textSearchInit('pdf', searchMode, searchOptions);
  })

I’ll update that guide as well.

Thanks!
Logan

4

Hi Logan,

When I use CoreControls.Search.Mode.PAGE_STOP instead of docViewer.SearchMode.e_page_stop(as in the code snippet given by me), I get the error as: https://nimb.ws/CmiS3a

Can you please check for this as well?

Thank you,
Madhavi

5

Hey there,

This was a breaking change in 7.0 that moved it to the CoreControls namespace. docViewer.SearchMode.e_page_stop is correct I believe for version 6.

6

Hi Logan,

Thank you for the quick response.

I upgraded to the version 7.3.2 and the errors have gone. Now, when I call the function textSearchInit, the onResult callback doesn’t fire even though the search keyword is in the pdf. Below is the code example,

  docViewer.on('documentLoaded', () => {
      
    // Set search modes. See the API reference for more information
    const searchMode = CoreControls.Search.Mode.PAGE_STOP | CoreControls.Search.Mode.HIGHLIGHT;;
      console.log("doc loaded")
    const searchOptions = {
      fullSearch: true,
      onResult: (result) => {
          alert("result");
      
      },
        
    startPage: 2,
    
    onDocumentEnd: function(){
        alert("onDocumentEnd");
    }
        
    }

    // start the search
    const test= docViewer.textSearchInit('Edit', searchMode, searchOptions);
   
  })

Screenshot of output for reference: https://nimb.ws/i2hple

Thank you,
Madhavi

7

Hi Logan,

Actually the search was not working in that particular pdf due to some reasons. I changed the pdf and tried and the above code worked. Thanks a lot for checking.

Regards,
Madhavi

1 Like
8

@Logan I noticed another typo in your version 8xx documentation.

const { 
    documentViewer, 
    Core, 
    annotationManager, 
    Annotations 
  } = instance.Core;

Instead of Core, it should be Search:

const { 
    documentViewer, 
    Search, 
    annotationManager, 
    Annotations 
  } = instance.Core;

Also there’s duplicate closing semi colons:

const searchMode = Core.Search.Mode.PAGE_STOP | Core.Search.Mode.HIGHLIGHT;;