PDF.js

Question

我使用 PDF.js 和 iframe src=viewer.html?file=... 标签嵌入了一个 PDF。我正在使用 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 上发现了类似的问题，但他们无法真正回答我的问题：

Access PDF.js Viewer functions / events

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

Answer 2

受 dev-random 的回答启发，我将以下代码添加到 viewer.js。我通过传递 url 参数打开我的 pdf，例如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();
}

Answer 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=term 并得到如下结果：

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

工作得很好，所有单词都突出显示了！

Answer 4

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

现在 PDFjs 还将打开搜索栏并填充搜索项。这使您可以滚动浏览所有突出显示的发现。

PDF.js - 在嵌入式 PDF 上使用搜索功能

PDF.js - Using search function on embedded PDF

iframe

jquery