Question

我正在尝试在我的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”

Answer 1

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

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

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

我建议您将按钮侦听器添加到就绪事件侦听器中，以便用户只有在查看器准备就绪后才能使用这些按钮。

将类实例保存到Vue数据

1 个答案: