CODEWITHSUNDEEP
jqueryiframepdf.js
dev-random
dev-random

Reputation: 771

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:

Upvotes: 12

Views: 22557

Answers (6)

K J
K J

Reputation: 11841

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/

Upvotes: 0

user20391746
user20391746

Reputation: 1

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.

Upvotes: 0

Rob van Linden
Rob van Linden

Reputation: 31

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.

Upvotes: 0

webstruck
webstruck

Reputation: 631

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

Upvotes: 17

Rafael Ara&#250;jo
Rafael Ara&#250;jo

Reputation: 3864

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!

Upvotes: 4

dev-random
dev-random

Reputation: 771

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

Upvotes: 11

Related Questions