jquery - 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

Answer 1

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