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

【问题标题】：Search using javascript on Embedded pe:documentViewer在嵌入式 pe:documentViewer 上使用 javascript 进行搜索
【发布时间】：2019-11-09 16:19:04
【问题描述】：

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

我需要使用 javascript 将查询传递给 phraseSearch，以便在找到我的查询的正确位置打开 pdf 文件。
我将在我用来打开 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

有什么想法可以实现这一点吗？
我如何才能访问 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 无法识别。我不知道如何访问它。

【问题讨论】：

因为 documentViewer 在 IFRAME 中加载了一个，所以您可能需要做一些特殊的魔术才能在 docviewer 加载时访问您尝试在 PDF 查询中使用的 PDFApplication。看到这个线程，我在 LOAD 上找到了 IFRAME。 forum.primefaces.org/viewtopic.php?f=14&t=55587
感谢 Melloware 提供的信息。我不确定定义 pdfHideButton 函数的第一部分。当我将它放在页面底部时，出现错误：pdfHideButton 未定义。如果我把它放在标题中，我的页面根本不会被渲染。我做错了什么？
pdfHideButton 我只是在加载的 JS 文件中声明。您是否有一个 JS 文件包含在您的页面中以用于您的应用程序中的其他内容？
好的，我在我的页面中获得了带有 pdfHideButton 的示例代码。这是一个开始。接下来将尝试在加载时触发短语搜索。
优秀。如果您的脚本正常工作，请回帖！

标签： javascript pdf pdf.js primefaces-extensions

【解决方案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();

【讨论】：

太好了，它有效！但是还是有一点小问题。将您的代码放入 IFRAME on LOAD 部分，pdfViewer 仍未加载/识别。我在控制台中看到这是因为脚本在pdf.viewer.js 之前开始。有没有办法在 iframe 完成加载后执行脚本？
是的，您可能需要使用 document.ready() jquery 函数而不是 iFrame onLoad，甚至可能需要使用 setTimeOut 来等待其加载。