PDF.js - Using search function on embedded PDF
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;
}
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();
}
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!