配置文件

有两种方法可以为 WebViewer 添加自定义设置，第一种方法是通过访问应用程序中的 WebViewer 实例，第二种方法是使用配置文件，配置文件是一个独立的 JavaScript 文件，在 WebViewer 的 iframe 中执行。本文将详细说明第二种。

初始化配置

您可以将自定义代码组织在一个单独的 JavaScript 文件中，该文件在 iframe 的上下文中执行。这样，您就可以直接访问 iframe 的窗口和文档，并直接使用 WebViewer 的全局方法。

如果您将 WebViewer 库文件夹托管在与应用程序不同的服务器上，建议使用配置文件。由于配置文件直接在 iframe 中执行，因此不会出现跨域问题。

要使用配置文件实例化 WebViewer，只需在 WebViewer 构造函数中设置 config 选项即可。例如：

// app.js
ComPDFKitViewer.init({
  path: 'https://myerver.com/webviewer/lib',
  pdfUrl: 'https://www.example.com/test.pdf',
  license: 'Input your license here',
  config: 'path/to/your/config.js'
}, document.getElementById('viewer'));

重要事件

配置文件会在核心对象实例化之前执行，因此您无法立即调用核心函数。您可以监听 HTML 文档对象上的事件，以便在关键节点收到通知。

`viewerLoaded`

当 WebViewer 完成初始化后，它会向当前窗口和父窗口发送一条类型为 viewerLoaded 的消息。我们在外层页面使用 window.addEventListener('message', …) 来监听这条消息，一旦收到，就可以安全地执行自定义逻辑，例如修改界面或初始化扩展功能。

这种方式是通过窗口 postMessage API 在您的页面和 iframe 之间进行通信。通常用于 WebViewer 被嵌入在 iframe 中或通过外部配置文件初始化的场景。

// config.js 在内部 iframe 中执行
window.addEventListener('message', receiveMessage, false);

function receiveMessage(event) {
  if (event.isTrusted && typeof event.data === 'object') {
    switch (event.data.type) {
      case 'viewerLoaded':
        console.log('viewer loaded');
        break;
    }
  }
}

`documentLoaded`

documentLoaded 事件触发后，您就可以访问文档以及 DocumentViewer 和 AnnotationManager 上与页面相关的函数。

这种方式用于在 WebViewer 内部环境中监听事件，通常是在你已经通过 ComPDFKitViewer.init(...) 获取到实例对象的情况下使用。

// config.js 在内部 iframe 中执行
instance.docViewer.addEvent('documentloaded', () => {
  console.log('Document Loaded');

  docViewer.addAnnotations({
    type: 'square',
    pageIndex: 0,
    rect: { left: 50, top: 50, right: 100, bottom: 100 },
    borderWidth: 2,
    opacity: 1,
    fillTransparency: 1,
    fillColor: '',
    color: '#FF0000',
    borderColor: '#FF0000',
    borderStyle: 'solid',
    dashes: []
  });
});

在 iframe 中访问外部页面

如果你想从 iframe 内部访问外部页面，例如从配置文件中的代码访问，可以使用 window.parent 访问父窗口。因此，如果你定义了一个加载到 HTML 页面上的 API，就可以像这样从 iframe 内部访问它： window.parent.myApi.myFunction()。

配置文件 ​

初始化配置 ​

重要事件 ​

viewerLoaded ​