PDF.js – 在嵌入式PDF上使用搜索function

我使用带有iframe src=viewer.html?file=...标签的PDF.js嵌入了PDF。 我正在使用PDF.js及其viewer.html，因为它已经提供了我在其他任何示例中都找不到的搜索function。

我希望用户能够点击

并使用包含的文本来搜索PDF并跳转到第一次出现。 JSFiddle： http ： //jsfiddle.net/agyetcsj/

HTML

 
6.5 Calling External Functions
  

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
• 访问PDF.js查看器function/事件

谢谢！

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

Answer 2

由于没有其他人回答我的问题，我将自己回答。 我终于使用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 3

我试图实现@ 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并且得到如下：

工作就像一个魅力，突出显示所有单词！