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 I couldn't find in any other example.

I would like the user to be able to click on a <td> and use the containing text to search the PDF and jump to the first occurence. JSFiddle: http://jsfiddle.net/agyetcsj/

HTML

<div id="tableDiv">
    <table border="1" width="400px">
        <tr>
            <td>6.5  Calling External Functions</td>
        </tr>
    </table>
</div>
<iframe id="pdfImage" width="600px" height="600px" class="pdf" src="http://mozilla.github.com/pdf.js/web/viewer.html?file=compressed.tracemonkey-pldi-09.pdf"></iframe>

JavaScript

$('td').unbind('click').click(function () {
    alert("Find text in PDF!");
});

I found similar questions on SO but they couldn't really answer my question:

https://stackoverflow.com/questions/24439701/searching-embedded-pdfs-in-iframes
https://stackoverflow.com/questions/28322082/sencha-search-text-in-pdf-file-rendered-from-plugin-pdf-js
Access PDF.js Viewer functions / events

score 16 · Answer 1 · edited Nov 29 '16 at 03:50

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();
}

score 11 · Accepted Answer · answered Aug 19 '15 at 14:14

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;
}

@Jrey Quiros: Are you asking if pdf.js is working on mobile? Browse to http://mozilla.github.io/pdf.js/web/viewer.html with your mobile. The JQuery code above should be working on mobile. — dev-random, Apr 24 '16 at 09:09
PDFView was changed to PDFViewerApplication. Also the latter has eventBus and dispatch() can be used to fire 'find' or 'findfromurlhash' events. — async5, Nov 10 '16 at 14:30

score 4 · Answer 3 · answered Nov 10 '16 at 13:04

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!

Just use '#search=' hash tag, as in http://mozilla.github.io/pdf.js/web/viewer.html#search=JavaScript — async5, Nov 10 '16 at 14:17
Can you share the code preview or js fiddle. It will help me — ManiMuthuPandi, Nov 30 '20 at 05:47

score 0 · Answer 4 · answered Sep 05 '20 at 17:42

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.

user20391746 · Answer 5 · 2022-11-05T22:37:42.070

0

A short update note. The snippet below returns false, instead of true, because of the in operator.

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

for my use, just got what the content search using get() in params and passing it straight to the searchPDF().

searchPDF(params.get('search'));

everything works perfectly.

edited Nov 05 '22 at 22:37

answered Nov 05 '22 at 22:33

user20391746

1
1

score 0 · Answer 6 · answered Nov 06 '22 at 01:04

2022

Whilst many above answers wrote their own at the time Adobe had long ago defined the way to word search in web pdf. SO, taking example from above all that is now needed is use Adobes #tag

<iframe id="pdfImage" width="600px" height="600px" class="pdf" src="http://mozilla.github.io/pdf.js/web/viewer.html?file=compressed.tracemonkey-pldi-09.pdf#search=specialization"></iframe>

here is a Fiddle for search iframe embed and object (they are in effect each the same) http://jsfiddle.net/a8kmqrfu/1/

PDF.js - Using search function on embedded PDF

6 Answers6

Linked