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

Question

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

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

<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 扩展无关的类似问题：

有什么办法可以实现吗？
如何访问嵌入的 primefaces pdf.js？
非常感谢。

编辑：
现在我被困在这里。这段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。输入以下代码：

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

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

Search using javascript on Embedded pe:documentViewer

javascript

pdf

primefaces-extensions

pdf.js