使用 PdfJs 和 PDFFindController 构造函数搜索 pdf 页面答案

【问题标题】：Search pdf page using PdfJs & PDFFindController constructor使用 PdfJs 和 PDFFindController 构造函数搜索 pdf 页面
【发布时间】：2020-03-28 00:23:55
【问题描述】：

我正在使用 PDF.js 显示 pdf 文档。现在我希望能够在 pdf 文档中搜索文本。有一些关于如何执行此操作的示例，但它们不起作用，因为找不到 PDFFindController 的构造函数。

使用显示文档效果很好

let loadingTask = pdfjsLib.getDocument(url);
loadingTask.promise.then((pdf: any) => { /* display code here */ }

但是当我尝试按照Example 中的建议创建 PDFFindController 时，它失败了。

new pdfjsLib.PDFFindController();

Firefox 中的错误显示为：

TypeError: pdfjs_dist_1.default.PDFFindController is not a constructor

我不确定如何从这里开始，因为它看起来与我在 stackoverflow 上找到的示例和其他示例相似。

当我将库对象打印到控制台时，它没有在该对象上显示 PDFFindController 甚至 PDFViewer，所以我可以想象 PDFFindController 需要一个不同的库文件，但文档不会被清除哪个文件或如何使用 systemjs 导入它。

【问题讨论】：

标签： typescript systemjs pdfjs

【解决方案1】：

您是否尝试将pdfjsLib.PDFFindController() 替换为pdfjsViewer.PDFFindController()？

【讨论】：

【解决方案2】：

您可以使用 pdf.js 搜索方法。你应该这样称呼它：

PDFViewerApplication.findController.executeCommand("find" + evt.type, {
query: evt.query,
phraseSearch: evt.phraseSearch,
caseSensitive: evt.caseSensitive,
entireWord: evt.entireWord,
highlightAll: evt.highlightAll,
findPrevious: evt.findPrevious });

只需将您的搜索关键字替换为“evt.query”即可。

【讨论】：

【解决方案3】：

我也遇到了这个问题，我花了很长时间才解决这个问题。干得好。您收到该错误是因为 PDFLinkService() 不是 PDFjsLib 的函数，您需要从 PdfJsViewer 调用它。

试试这个：

<script src="https://cdn.jsdelivr.net/npm/pdfjs-dist@2.5.207/web/pdf_viewer.js"></script>

const PdfJsViewer = window['pdfjs-dist/web/pdf_viewer'];
 const pdfLinkService = new pdfjsViewer.PDFLinkService({
  eventBus,
});

你可以在这里查看：https://github.com/mozilla/pdf.js/blob/master/examples/components/simpleviewer.js

【讨论】：