dev-random dev-random - 1 month ago 17
jQuery Question

PDF.js - Using search function on embedded PDF

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:



Thanks!

Answer

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