Сохранить экземпляр класса в данные Vue - PullRequest
Новая
       14

Сохранить экземпляр класса в данные Vue

0 голосов
/ 12 января 2019

Я пытаюсь использовать PDFtron в одном из моих компонентов Vue. Я создаю экземпляр iFrame средства просмотра PDF в смонтированном хуке, так что после загрузки 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 of undefined '

1 Ответ

0 голосов
/ 14 января 2019

Каким-то образом вы запускаете нажатие кнопки до загрузки и инициализации WebViewer.

Вы не можете взаимодействовать с API WebViewer (кроме конструктора), пока не получите готовое событие. https://www.pdftron.com/api/web/PDFTron.WebViewer.html#event:ready__anchor

См. Эту страницу для примера. https://www.pdftron.com/documentation/samples/js/viewing

Я бы порекомендовал добавить ваших слушателей кнопок в готовом слушателе событий, чтобы пользователи могли использовать эти кнопки только после того, как зритель будет готов.

...