我使用带有iframe src=viewer.html?file=...
标记的PDF.js嵌入了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上发现了类似的问题,但他们无法真正回答我的问题:
谢谢!
受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();
}
由于没有其他人回答我的问题,我将自己回答。我终于通过使用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;
}
我试图实现@ webstruck的方法,但无法解决“PDFView未定义”错误。我最终像这样解决:
//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>
工作就像一个魅力,突出显示所有单词!