npm install --save pdfvuer

npm i pdfvuer@next --save

<template>
  <pdf src="./static/relativity.pdf" :page="1">
    <template slot="loading">
      loading content here...
    </template>
  </pdf>
</template>

<script>
import pdf from 'pdfvuer'
import 'pdfjs-dist/build/pdf.worker.entry' // не требуется с версии 1.9.1

export default {
  components: {
    pdf
  }
}

<template>
  <div id="pdfvuer">
    <div id="buttons" class="ui grey three item inverted bottom fixed menu transition hidden">
      <a class="item" @click="page > 1 ? page-- : 1">
        <i class="left chevron icon"></i>
        Back
      </a>
      <a class="ui active item">
        {{page}} / {{ numPages ? numPages : '∞' }}
      </a>
      <a class="item" @click="page < numPages ? page++ : 1">
        Forward
        <i class="right chevron icon"></i>
      </a>
    </div>
    <div id="buttons" class="ui grey three item inverted bottom fixed menu transition hidden">
      <a class="item" @click="scale -= scale > 0.2 ? 0.1 : 0">
        <i class="left chevron icon" />
          Zoom -
      </a>
      <a class="ui active item">
        {{ formattedZoom }} %
      </a>
      <a class="item" @click="scale += scale < 2 ? 0.1 : 0">
        Zoom +
        <i class="right chevron icon" />
      </a>
    </div>
    <pdf :src="pdfdata" v-for="i in numPages" :key="i" :id="i" :page="i"
      :scale.sync="scale" style="width:100%;margin:20px auto;"
        :annotation="true"
        :resize="true"
        @link-clicked="handle_pdf_link">
      <template slot="loading">
        loading content here...
      </template>
    </pdf>
  </div>
</template>

<script>
import pdfvuer from 'pdfvuer'
import 'pdfjs-dist/build/pdf.worker.entry' // не требуется с версии 1.9.1

export default {
  components: {
    pdf: pdfvuer
  },
  data () {
    return {
      page: 1,
      numPages: 0,
      pdfdata: undefined,
      errors: [],
      scale: 'page-width'
    }
  },
  computed: {
    formattedZoom () {
        return Number.parseInt(this.scale * 100);
    },
  },
  mounted () {
    this.getPdf()
  },
  watch: {
    show: function (s) {
      if(s) {
        this.getPdf();
      }
    },
    page: function (p) {
      if( window.pageYOffset <= this.findPos(document.getElementById(p)) || ( document.getElementById(p+1) && window.pageYOffset >= this.findPos(document.getElementById(p+1)) )) {
        // window.scrollTo(0,this.findPos(document.getElementById(p)));
        document.getElementById(p).scrollIntoView();
      }
    }
  },
  methods: {
    handle_pdf_link: function (params) {
      // Scroll to the appropriate place on our page - the Y component of
      // params.destArray * (div height / ???), from the bottom of the page div
      var page = document.getElementById(String(params.pageNumber));
      page.scrollIntoView();
    },
    getPdf () {
      var self = this;
      self.pdfdata = pdfvuer.createLoadingTask('./static/relativity.pdf');
      self.pdfdata.then(pdf => {
        self.numPages = pdf.numPages;
        window.onscroll = function() { 
          changePage() 
          stickyNav()  
        }

        // Get the offset position of the navbar
        var sticky = $('#buttons')[0].offsetTop

        // Add the sticky class to the self.$refs.nav when you reach its scroll position. Remove "sticky" when you leave the scroll position
        function stickyNav() {
          if (window.pageYOffset >= sticky) {
            $('#buttons')[0].classList.remove("hidden")
          } else {
            $('#buttons')[0].classList.add("hidden")
          }
        }

        function changePage () {
          var i = 1, count = Number(pdf.numPages);
          do {
            if(window.pageYOffset >= self.findPos(document.getElementById(i)) && 
                window.pageYOffset <= self.findPos(document.getElementById(i+1)))
``` **API**

### Props

#### :src <sup>String / Object - default: ''<sup>
URL-адрес файла PDF. В качестве значения параметра :src можно также использовать строку, типизированный массив, DocumentInitParameters или PDFDataRangeTransport. Для получения более подробной информации см. [`PDFJS.getDocument()`](https://github.com/mozilla/pdf.js/blob/8ff1fbe7f819513e7d0023df961e3d223b35aefa/src/display/api.js#L117).

#### :page <sup>Number - default: 1<sup>
Номер страницы для отображения.

#### :rotate <sup>Number - default: 0<sup>
Поворот страницы в градусах, допустимы только кратные 90 градусам значения.

#### :scale <sup>Number / String - default: 'page-width' - .sync</sup>
Коэффициент масштабирования. По умолчанию PDF будет масштабирован так, чтобы соответствовать ширине страницы и ширине контейнера. При передаче значения «page-width» и/или использовании resize будет отправлен коэффициент масштаба, вычисленный соответствующим образом через событие update:scale (используйте его с scale.sync="scale").

#### :resize <sup>Boolean - default: false</sup>
Включите автоматическое изменение размера при изменении размера окна. По умолчанию автоизменение размера отключено.

#### :annotation <sup>Boolean - default: false</sup>
Отображение аннотаций в PDF. По умолчанию слой аннотаций отключен.

#### :text <sup>Boolean - default: true</sup>
Отображение текстового слоя в PDF. По умолчанию текстовый слой включён.

### Events

#### @numpages <sup>Number<sup>
Общее количество страниц PDF.

#### @loading <sup>Boolean<sup>
Состояние загрузки предоставленного PDF.

#### @error <sup>Function<sup>
Обработчик функций для ошибок, возникающих во время загрузки/рисования источника PDF.

#### @link-clicked <sup>Function<sup>
Обработчик функций для ошибок, возникающих при нажатии на ссылку в PDF. Пример:
```js
    handle_pdf_link: function (params) {
      // Прокрутка до соответствующего места на нашей странице — компонента Y
      // массива параметров destArray * (высота div / ???), от нижней части div страницы
      var page = document.getElementById(String(params.pageNumber));
      page.scrollIntoView();
    }