PDF.js - Using the search function in the embedded PDF file

Question

I have embedded PDF using PDF.js with iframe src=viewer.html?file=... tag iframe src=viewer.html?file=... I use PDF.js and its viewer.html as it already provides a search function that I could not find in any other example.

I would like the user to click on the <td> and use the containing text to search the PDF and go on to the first introduction. 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 could not 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 to functions / events of viewing PDF.js

Thanks!

Answer 1

Since no one else answered my question, I will answer it myself. I finally got it working using viewer.html @ https://github.com/mozilla/pdf.js/tree/master/web .

Here is an example of the code I wrote to make it work. Hope this helps 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

Inspired by a random answer, I added the following code in viewer.js. Am I opening my pdf by passing URL parameters like http: // localhost: 3000 / pdf / viewer.html? & Search = your_search_term . That way, when you open the PDF file, the search is done automatically, which matches my usage scenario.

 //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 3

I tried to implement the @webstruck approach, but could not resolve the "PDFView is not defined" error. I end up deciding this way:

 //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 iframe, I added the term & search = and got the following:

 <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 the words are highlighted!

Answer 4

Please tell me, share viewer.html and viewer.js, thanks in advance.