Search using code on Embedded PDFJS

Question

I have integrated PDFJS with my webpage. I want to search using javascript.

It's working fine for first time search. But then I try to search again with different keyword then it's not highlighting proper keyword.

Here is what I have tried:

    // search with PDF.js
    function searchPDF(td_text)
    {
        PDFViewerApplication.findBar.open();
        PDFViewerApplication.findBar.findField.value = td_text;
        PDFViewerApplication.findBar.highlightAll.checked= true;
        PDFViewerApplication.findBar.findNextButton.click();
    }


    function resetPDFSearch()
    {
        if(PDFViewerApplication.findBar.findField.value != '') {
            PDFViewerApplication.findBar.findField.value = '';
            PDFViewerApplication.findBar.highlightAll.checked= false;
            PDFViewerApplication.findController.reset();
            PDFViewerApplication.findBar.close();
            PDFViewerApplication.findController.matchCount = 0;
            PDFViewerApplication.findController.updateMatch();
        }
    }

In above function, when I call searchPDF() first time then keyword is highlighting properly. But again if I call same function with different keyword then it shows previously highlighted keyword only.

I try to create new function resetPDFSearch() to reset all previously filtered and highlighted keywords. But no luck.

Thanks in advance.

Oleksa O. · Answer 1 · 2022-05-18T18:52:54.290

3

Here is another solution for those, who uses pdf.viewer.js :

    // this method uses the viewer's search functionality to highligt given text
    function searchText(txt) {
    
        if (typeof PDFViewerApplication.findController !== 'undefined') {
            PDFViewerApplication.findController.executeCommand('find', {
                query: txt,
                caseSensitive: false,
                highlightAll: true,
                findPrevious: true
            });
        }
    
    }

UPDATE: Since PDFJS version 2.13 the following method is no more valid and is removed (deprecated): executeCommand therefore an example above should use an updated version's methods:

    // this method uses the viewer's search functionality to highligt given text
    function searchText(txt) {
    
        if (typeof PDFViewerApplication !== 'undefined') {
            PDFViewerApplication.eventBus.dispatch('find', {
                query: txt,
                caseSensitive: false,
                highlightAll: true,
                findPrevious: true
            });
        }
    
    }

edited May 18 '22 at 18:52

answered Nov 26 '18 at 13:45

Oleksa O.

827
8
16

1

I need something similar. My framework implements pdf.viewer.js too. May I ask what is `PDFViewerApplication`? – codyLine Nov 12 '19 at 14:20
@codyLine PDFViewerApplication is an object, that contains parameters for pdf viewer – Oleksa O. Nov 12 '19 at 14:25
1

How can I access it? Your code give me the warning that the global variable `PDFViewerApplication` is not declared! – codyLine Nov 12 '19 at 14:40
@codyLine pls check the pdfviewer's repository. here is sample: https://github.com/mozilla/pdf.js/blob/c807637f405e4ac0af450bc73032ff6a066efc2d/web/app.js – Oleksa O. Nov 12 '19 at 14:47
The fundController takes either "find" or "findagain", but my problem is that "find" seems to jump to the *third* occurrence of my string. In your example, why have you set "findPrevious" to true ? – Mike Gledhill Oct 01 '21 at 07:44

score 1 · Accepted Answer · answered Jan 11 '16 at 13:27

After so much headache and brainstorming. I come to answer as below.

function searchPDF(td_text)
{
    PDFView.findBar.open();
    $(PDFView.findBar.findField).val(td_text);

    var event = document.createEvent('CustomEvent');
    event.initCustomEvent('findagain', true, true, {
        query: td_text,
        caseSensitive: $("#findMatchCase").prop('checked'),
        highlightAll: $("#findHighlightAll").prop('checked', true),
        findPrevious: undefined
    });

    PDFViewerApplication.findBar.dispatchEvent('');

    return event;
}

No need for resetPDFSearch() function.

This case is for my scenario. Hope you might have different case. But yes using event I can search as many time as I want. :)

Might be helpful to someone in future.

Search using code on Embedded PDFJS

2 Answers2

Linked