PDF.js - Using search function on embedded PDF

Question

I embedded a PDF using PDF.js with the iframe src=viewer.html?file=... tag. I\'m using PDF.js and its viewer.html as it already provides a search function that

Answer 1

As no one else responded to my question I'm going to answer it myself. I finally got it working by using the viewer.html @ https://github.com/mozilla/pdf.js/tree/master/web.

Here is some example code that I wrote to make it work. Hope it will help someone else in the future.

PDFView.open(pdf_url, 0);

// search with PDF.js
function searchPDF(td_text) {
    PDFView.findBar.open();
    $(PDFView.findBar.findField).val(td_text);
    $("#tableDiv").focus();

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

Answer 2

I tried to implement @webstruck's approach but couldn't resolve "PDFView is not defined" error. I end up resolving like this:

//Add this piece of code to webViewerInitialized function in viewer.js
if ('search' in params) {
    searchPDF(params['search']);
}

then changed his approach to this:

//New function in viewer.js
function searchPDF(p_search_text) {
   var l_params = { query: p_search_text, phraseSearch: p_search_text };
   webViewerFindFromUrlHash(l_params);
}

In the HTML the iframe I added the &search=term and got like this:

<iframe id="htmlPDFViewer" style="width:100%; " frameBorder="0" src="../Scripts/pdfjs/web/viewer.html?file=../pdf/file.pdf&search=searchTerm" ></iframe>

Worked like a charm, all words highlighted!

Answer 3

Inspired by dev-random's answer I added following code to viewer.js. I open my pdf by passing url parameters e.g. http://localhost:3000/pdf/viewer.html?&search=your_search_term. This way when you open the PDF file, the search is automatically performed which suits my usecase.

//Add this piece of code to webViewerInitialized function in viewer.js
if ('search' in params) {
    searchPDF(params['search']);
}

//New function in viewer.js
function searchPDF(td_text) {
    PDFViewerApplication.findBar.open();
    PDFViewerApplication.findBar.findField.value = td_text;
    PDFViewerApplication.findBar.caseSensitive.checked = true;
    PDFViewerApplication.findBar.highlightAll.checked = true;
    PDFViewerApplication.findBar.findNextButton.click();
    PDFViewerApplication.findBar.close();
}

Answer 4

Added some lines to the solution from Rafael Araujo:

//Add this piece of code to webViewerInitialized function in viewer.js
if ('search' in params) {
    searchPDF(params['search']);
}

//New function in viewer.js
function searchPDF(p_search_text) {
   var l_params = { query: p_search_text, phraseSearch: p_search_text };
   webViewerFindFromUrlHash(l_params);
//Additional lines:
    PDFViewerApplication.findBar.toggle();
   document.getElementById('findInput').value=l_params.phraseSearch;
}

Now PDFjs will also open the searchbar with the searchterm filled in. This allows you to scroll through all the highlighted finds.