2

I have a web app that uses the documentViewer from primefaces extensions to view pdf files.

I need to pass a query to the phraseSearch using a javascript, so that the pdf file get opened at the right place where my query is found.
I would use this javascript (pdfQuery) in the oncomplete attribute of my button I use to open the documentViewer:

<p:commandButton action="#{searchController.openPDF}" 
oncomplete="PF('pdf_dlg').show();pdfQuery('Framework')" 
value="open PDF" update="pdf" />

<p:dialog header="#{searchController.pdfTitle}"
  widgetVar="pdf_dlg" 
responsive="true" dynamic="true" >
    <h:form id="pdf">
        <pe:documentViewer value="#{pdfBean.tempPdfFile}"/>
    </h:form>
</p:dialog>

I found similar questions on SO related to PDF.js but not primefaces extensions:
PDF.js - Using search function on embedded PDF
Search using code on Embedded PDFJS

Any ideas how can I achieve this?
How can I get access to the primefaces embedded pdf.js?
Many thanks in advance.

EDIT:
Right now I'm stuck here. This piece of javascript is not working:

function triggerSearch(tx_query) {
    $('iframe').on('load',
         function () {
            if (typeof PDFViewerApplication.findController !== 'undefined') {
               PDFViewerApplication.findController.executeCommand('find', {
                  query: tx_query,
                  caseSensitive: false,
                  highlightAll: true,
                  findPrevious: true
              });
         }
    });
}

Unfortunately the method PDFViewerApplication from pdf.viewer.js doesn't get recognized. I don't figure out how to access it.

codyLine
  • 509
  • 2
  • 8
  • 26
  • Because documentViewer loads an in IFRAME you might have to do some special magic to access the PDFApplication you are trying to use in your PDF query when docviewer loads. See this thread there I find the IFRAME on LOAD. https://forum.primefaces.org/viewtopic.php?f=14&t=55587 – Melloware Nov 10 '19 at 13:33
  • Thanks Melloware for the information. I'm not sure about the first part where the `pdfHideButton` function is defined. When I put it at the bottom of the page, I get the error: pdfHideButton is not defined. If I put it in the header, my page doesn't get rendered at all. What am I doing wrong? – codyLine Nov 11 '19 at 14:20
  • pdfHideButton I just declare in a JS file that is loaded. Do you have a JS file that you include on your page for other things in your app? – Melloware Nov 11 '19 at 17:32
  • Ok, I got your sample code with pdfHideButton work in my page. That's a start. Next will be to try to get a phrase search triggered on load. – codyLine Nov 11 '19 at 21:08
  • Excellent. Please post back if you get your script working! – Melloware Nov 12 '19 at 12:07
  • The documentViewer uses `pdf.viewer.js`. Do you have an Idea how to access it? So I can try something similar to what is mentioned here: https://stackoverflow.com/questions/34717771/search-using-code-on-embedded-pdfjs. – codyLine Nov 12 '19 at 14:44
  • My issue is that the variable `PDFViewerApplication` doesn't get recognized. – codyLine Nov 12 '19 at 15:00
  • I created this issue: https://github.com/primefaces-extensions/primefaces-extensions.github.com/issues/750 – Melloware Nov 13 '19 at 12:06
  • Thanks Melloware – codyLine Nov 13 '19 at 14:31
  • solved it with the solution below. Easier than we thought – Melloware Nov 13 '19 at 19:01

1 Answers1

2

Navigate to the Showcase page here: https://www.primefaces.org/showcase-ext/sections/documentviewer/advanced.jsf

Now open a Console window using F12 of Chrome or your favorite browser. Type the following code in:

window.frames[0].PDFViewerApplication.findBar.open();

Notice the FindBar opened? So now you can write a script that does exactly what you want by getting access to PDFViewerApplication.

var pdfViewer = window.frames[0].PDFViewerApplication;
pdfViewer.findBar.open();
pdfViewer.findBar.findField.value = "My text";
pdfViewer.findBar.highlightAll.checked= true;
pdfViewer.findBar.findNextButton.click();
Melloware
  • 10,435
  • 2
  • 32
  • 62
  • Great, it works! But there is still a little problem. Putting your code inside the IFRAME on LOAD part, the pdfViewer is still not loaded/recognized. I see in the console that is because the script start before `pdf.viewer.js`. Is there a way to get script executed after the iframe finished loading? – codyLine Nov 14 '19 at 13:38
  • Yes you need to use probbably document.ready() jquery function not the iFrame onLoad and maybe even have to use a setTimeOut towait until its loaded. – Melloware Nov 18 '19 at 12:18