javascriptpdfpdf.jsprimefaces-extensions

Search using javascript on Embedded pe:documentViewer


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.


Solution

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