loadPageText of docviewer instance is not found

  • We are not able to find below two methods (loadPageText & getTextPosition) in the docviewer object, same things are
    working in the pdftron.

  • Kindly suggest what we need to do the changes so, we can highlight all the search words in the pdf.

  • We are using “@pdftron/pdfjs-express”: “^7.2.2” as node-modules.

     docViewer.on('documentLoaded', async () => {
              const doc = docViewer.getDocument();
              console.log(doc);
              var serachArr = ['PDF', 'SDK', 'interest'];
              var searchTerm = '';
              var finalQuads = [];
              const pageNumber = 2;
              async function test() {
                  for (let i = 0; i < serachArr.length; i++) {
                      console.log('Before await for ', serachArr[i]);
                      let result = await Promise.resolve(serachArr[i]);
                      console.log('After await. Value is ', result);
                      searchTerm = serachArr[i];
                      const pageText = await doc.loadPageText(pageNumber);
                 
                      let startIndex = 0;
                      let endIndex = 0;
                      if (pageText != undefined) {
                          while (startIndex > -1) {
                              startIndex = pageText.indexOf(searchTerm, endIndex);
                              endIndex = startIndex + searchTerm.length;
                              const quads = await doc.getTextPosition(pageNumber, startIndex, endIndex);
                              quads.map((data) => {
                                  if (data.x1 != undefined) {
                                      finalQuads.push(data);
                                  }
                              })
                          }
                      }
                      highlight.PageNumber = pageNumber;
                      highlight.StrokeColor = new Annotations.Color(255, 255, 0);
                      console.log("searchTerm", searchTerm);
                      console.log("final === ", finalQuads);
                  }
              }
    
              test().then(_ => {
                  highlight.Quads = finalQuads;
                  console.log(finalQuads[0]);
                  annotManager.addAnnotation(highlight);
                  annotManager.drawAnnotations(highlight.PageNumber);
                  console.log('After test() resolved')
              });
              console.log('After calling test');
          })

Hey there!

If you are just looking to search and highlight words, I recommend using our built in search APIs rather than doing the search yourself. Below are a few guides to get you started:

If these don’t work for you, let me know.

Thanks!
Logan

Thank You for the response!!

I have tried both the solutions, in the advance search I’m getting following error :

I have implemented the same example which was there in the documention.

Can you please check and let me know ?

Thank You.

Hey there,

It looks like there’s an error in your setup. That first error message is probably breaking stuff.

Can you send the code you’re using to initialize Express? My guess is that theres an error loading the resources.

Thanks!
Logan

Here is the code,

import React, { useEffect } from 'react';
import WebViewer from '@pdftron/pdfjs-express';

function AdvanceSearch(props) {

    useEffect(() => {
        WebViewer(
            {
                path: '/webviewer/lib',
                initialDoc: '/files/pdftron_about.pdf',
            },
            document.getElementById('viewer')
          ).then(instance => {
            const {Annotations, docViewer, CoreControls, annotManager, } = instance;
            docViewer.on('documentLoaded', () => {
              const searchMode = CoreControls.Search.Mode.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]) 
                }
              }
              docViewer.textSearchInit('PDF', searchMode, searchOptions);
            })
          })
    })
    
    return (
        <div className="App">
            <div className="header">React sample</div>
            <div className="webviewer" id="viewer"></div>
        </div>
    );
}

export default AdvanceSearch;

Please check, Thank you.

Hey there,

It looks like you are not using useEffect correctly. You are not passing in the second parameter, which means that WebViewer will be mounted multiple times and that will probably cause issues.

Try passing an empty dependancy array to useEffect and see if that fixes it…

useEffect(() => {
   ... your express code
}, [])

Thanks!
Logan

Hi Logan,

This is not working as well.
sharing the updated code with you and screenshot of error(getting same as before).

useEffect(() => {
    WebViewer(
        {
            path: '/webviewer/lib',
            initialDoc: '/files/pdftron_about.pdf',
        },
        document.getElementById('viewer')
      ).then(instance => {
        const {Annotations, docViewer, CoreControls, annotManager, } = instance;
        docViewer.on('documentLoaded', () => {
          console.log("asss", CoreControls);
          const searchMode = CoreControls.Search.Mode.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]) 
            }
          }
          docViewer.textSearchInit('PDF', searchMode, searchOptions);
        })
      })
}, [])

Screenshot of error:

Please check, Thank you.

Hey there,

Looks like you’re using an older version of Express (I realize that our samples haven’t been updated to use 7.x.x).

Please make sure you’re using the latest version, and then let me know if you still have this issue.

Thanks!

I have updated the version to latest one as you said.
it is now - “@pdftron/pdfjs-express”: “^7.3.1”
still getting the same error as I already shared with you.
Please, look into this and let me know.

Thank you.

Hi,

I cannot reproduce your issue.

Please make sure that Express is getting loaded properly and that /webviewer/lib contains all the files necessary.

I would recommend deleting the entire contents of /webviewer/lib and reinstalling PDF.js Express from a clean state.

Thanks!