PDF.js - Использование функции поиска во встроенном PDF файле

Я вложил PDF, используя PDF.js с тегом iframe src=viewer.html?file=.... Я использую PDF.js и его viewer.html, поскольку он уже предоставляет функцию поиска, которую я не мог найти ни в одном другом примере.

Я хотел бы, чтобы пользователь мог щелкнуть по <td> и использовать содержащий текст для поиска в PDF и перейти к первому вступлению. 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!");
});

Я нашел похожие вопросы по SO, но они не могли ответить на мой вопрос:

Спасибо!

Ответы

Ответ 1

Поскольку никто другой не ответил на мой вопрос, я сам отвечу на него. Я, наконец, получил его работу, используя viewer.html @https://github.com/mozilla/pdf.js/tree/master/web.

Вот пример кода, который я написал, чтобы он работал. Надеюсь, это поможет кому-то еще в будущем.

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

Ответ 2

Вдохновленный случайным ответом, я добавил следующий код в viewer.js. Я открываю свой pdf, передавая параметры URL, например, http://localhost: 3000/pdf/viewer.html? & Search = your_search_term. Таким образом, когда вы открываете файл PDF, поиск выполняется автоматически, что соответствует моему сценарию использования.

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

Ответ 3

Я попытался реализовать подход @webstruck, но не смог разрешить ошибку "PDFView is not defined". Я в конечном итоге решаю так:

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

В HTML iframe я добавил термин & search = и получил следующее:

<iframe id="htmlPDFViewer" style="width:100%; " frameBorder="0" src="../Scripts/pdfjs/web/viewer.html?file=../pdf/file.pdf&search=searchTerm" ></iframe>

Работал как шарм, все слова выделены!

Ответ 4

Подскажите пожалуйста, поделитесь viewer.html и viewer.js, заранее спасибо.