javascript - 在嵌入式 pe :documentViewer 上使用 javascript 搜索

Question

我有一个网络应用程序，它使用 primefaces 扩展中的 documentViewer 来查看 pdf 文件。

我需要使用 javascript 将查询传递给 phraseSearch，以便在找到我的查询的正确位置打开 pdf 文件。
我会在中使用此 javascript (pdfQuery)我用来打开 documentViewer 的按钮的 oncomplete 属性:

<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>

我在 SO 上发现了与 PDF.js 相关但与 primefaces 扩展无关的类似问题:
PDF.js - Using search function on embedded PDF
Search using code on Embedded PDFJS

有什么想法可以实现吗？
我怎样才能访问嵌入 pdf.js 的 primefaces？
在此先感谢您。

编辑:
现在我被困在这里。这段 javascript 不工作:

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

不幸的是，pdf.viewer.js 中的方法 PDFViewerApplication 没有被识别。我不知道如何访问它。

Answer 1

在此处导航至展示页面: https://www.primefaces.org/showcase-ext/sections/documentviewer/advanced.jsf

现在使用 Chrome 的 F12 或您喜欢的浏览器打开一个控制台窗口。输入以下代码:

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

注意到 FindBar 打开了吗？因此，现在您可以通过访问 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();