PDF.js: 向 viewer.js 中添加自定义事件处理程序

PDF.js 是一款由 Mozilla 开发的 JavaScript 库，用于在 Web 浏览器中呈现 PDF 文件。它通过使用 HTML5 技术而不是插件来呈现 PDF 文件。PDF.js 通过使用本地浏览器功能（例如 Canvas 和 Web Fonts）提供非常强大的渲染性能，并且具有高度可定制性。

viewer.js 是 PDF.js 中的一个模块，它是 PDF.js 视图器的核心代码。它可以在浏览器中显示 PDF 文档并提供一系列工具，例如缩放、旋转、搜索、标注等等。

在 viewer.js 中，您可以轻松地添加自定义事件处理程序，以响应用户操作并对 PDF 文档执行特定的操作。例如，您可以添加一个自定义事件处理程序，以在用户完成搜索操作时向 Google Analytics 发送跟踪事件。在本文中，我们将讨论如何在 PDF.js 的 viewer.js 中添加自定义事件处理程序。

步骤

以下是向 viewer.js 中添加自定义事件处理程序的步骤：

1. 首先，您需要了解 viewer.js 中支持的事件类型。您可以在 pdfjs/web/viewer.js 中的 Viewer.prototype 中找到现有的所有事件类型。例如，以下是搜索事件的定义：

// Search events.
"find": { src: "find", eventType: "find", label: _tu("Find"), });

2. 接下来，您需要编写一个函数，该函数将作为自定义事件处理程序。该函数必须接受一个事件对象作为其唯一参数。例如，以下是自定义搜索完成事件处理程序的示例：

function trackSearchCompleted(event) {
  // Send a tracking event to Google Analytics
  ga('send', 'event', 'PDF', 'search-completed', event.query);
}

在此示例中，我们使用 Google Analytics 发送一个事件，以跟踪 PDF 搜索的完成。event.query 是搜索查询字符串。

3. 最后，您需要将自定义事件处理程序添加到 viewer.js 中。为此，您可以使用 Viewer.prototype.attachEvent() 方法。该方法需要三个参数：

• 事件类型
• 自定义事件处理程序
• 可选的事件处理程序选项

例如，以下是向 viewer.js 添加自定义搜索完成事件处理程序的示例：

Viewer.prototype.attachEvent("search", function(e) {
  if (e.type === "completed") {
    trackSearchCompleted(e);
  }
});

在此示例中，我们将 trackSearchCompleted() 函数添加为「search completed」事件的处理程序。

##总结

在本文中，我们讨论了如何向 PDF.js 的 viewer.js 中添加自定义事件处理程序。要执行此操作，您需要了解 viewer.js 中支持的现有事件类型，并编写自定义事件处理程序。最后，您需要使用 Viewer.prototype.attachEvent() 方法将自定义事件处理程序连接到 viewer.js 中的相应事件。