时间戳

首页 > 解决方案 > 将类实例保存到 Vue 数据

javascript - 将类实例保存到 Vue 数据

问题描述

我正在尝试在我的一个 Vue 组件中使用 PDFtron。我在挂载的钩子中创建了 pdf 查看器 iFrame 实例，以便在加载 Vue 时，PDF 框架显示准备好加载 PDF：

mounted() {
    const viewerElement = document.getElementById('viewer');
    this.viewer = new PDFTron.WebViewer({
      path: 'https://www.pdftron.com/4.0/lib',
      l: 'apikey'
    }, viewerElement);
  }

我想保存这个实例，以便我可以用这样的方法再次调用它：

 methods: {
    getPDF() {
      this.viewer.loadDocument('https://pdftron.s3.amazonaws.com/downloads/pl/webviewer-demo.pdf')
    }
  }

为了做到这一点，我想我可以viewer在我的数据变量中创建一个变量，然后将 pdftron 查看器保存到它，这就是我将查看器保存到this.viewer. 不幸的是，每当我调用该getPDF函数时，都会收到以下错误：The viewer instance is not defined yet.我不确定这是否是在 Vue 中保存类实例的正确方法。

该getPDF函数在这样的按钮上调用：

<v-btn color="primary" @click="getPDF(url)" :disabled="!valid">Load PDF</v-btn>'

更新：

我将我的 getPDF 函数更新为：

getPDF() {
      const viewerInstance = this.viewer.getInstance()
      viewerInstance.loadDocument('https://pdftron.s3.amazonaws.com/downloads/pl/webviewer-demo.pdf')
    }

但我仍然收到相同的错误The viewer instance is not defined yet和“无法读取未定义的属性 loadDocument”

标签： javascriptvue.jspdftron

解决方案

在 WebViewer 加载和初始化之前，您以某种方式触发了按钮单击。

在获得 ready 事件之前，您无法与 WebViewer API（构造函数除外）进行交互。 https://www.pdftron.com/api/web/PDFTron.WebViewer.html#event:ready__anchor

有关示例，请参见此页面。 https://www.pdftron.com/documentation/samples/js/viewing

我建议在准备好的事件侦听器中添加您的按钮侦听器，这样用户只能在查看器准备好后使用这些按钮。

推荐阅读