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

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 上发现了类似的问题，但他们无法真正回答我的问题:

• 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 PDF.js Viewer functions / events

Answer 1

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