PdfViewer.vue

<template>
  <v-layout row justify-center>
    <v-dialog
      v-model="showPdfViewer"
      fullscreen
      hide-overlay
      transition="dialog-bottom-transition"
    >
      <v-card>
        <v-toolbar dark color="primary">
          <v-toolbar-title>Visor de PDF con Vuejs 2</v-toolbar-title>
          <v-flex class="text-xs-right">
            <v-btn icon fab @click="$emit('closePdfViewer')" align-end>
              <v-icon>close</v-icon> {{ $t("actions.close") }}
            </v-btn>
          </v-flex>
        </v-toolbar>

        <v-container fluid grid-list-md text-xs-center pa-4 mt-1>
          <v-layout row wrap>
            <v-flex xs12 pl-2 pr-3 pb-0>
              <pdf
                :src="src"
                :page="currentPage"
                @num-pages="pageCount = $event"
                @page-loaded="currentPage = $event"
                :style="{
                  width: $vuetify.breakpoint.smAndDown ? '110%' : '45%'
                }"
              >
                <template slot="loading">
                  {{ $t("pdf.loading") }}
                </template>
              </pdf>
            </v-flex>
          </v-layout>
        </v-container>
      </v-card>
      <v-footer class="justify-center text-xs-center pl-0" inset app>
        <v-layout row wrap>
          <v-flex xs2>
            <v-btn
              class="primary"
              block
              :disabled="noPrevPage"
              @click="prevPage"
              >{{
                $vuetify.breakpoint.smAndDown ? "<<" : $t("pdf.prev")
              }}</v-btn
            >
          </v-flex>

          <v-flex xs8 mt-3>{{ currentPage }} / {{ pageCount }}</v-flex>

          <v-flex xs2>
            <v-btn
              class="primary"
              block
              :disabled="noNextPage"
              @click="nextPage"
              >{{
                $vuetify.breakpoint.smAndDown ? ">>" : $t("pdf.next")
              }}</v-btn
            >
          </v-flex>
        </v-layout>
      </v-footer>
    </v-dialog>
  </v-layout>
</template>

<script>
import pdf from "vue-pdf";
export default {
  name: "PdfViewer",
  props: ["pdfPath", "showPdfViewer"],
  components: {
    pdf
  },
  mounted() {
    this.src = pdf.createLoadingTask(this.$props.pdfPath);
  },
  data() {
    return this.initialData();
  },
  computed: {
    noPrevPage() {
      return this.currentPage <= 1;
    },
    noNextPage() {
      return this.currentPage === this.pageCount;
    }
  },
  methods: {
    initialData() {
      return {
        currentPage: 1,
        pageCount: 0,
        src: null,
        zoom: 100
      };
    },
    prevPage() {
      this.currentPage--;
    },
    nextPage() {
      this.currentPage++;
    }
  },
  beforeDestroy() {
    Object.assign(this.$data, this.initialData());
  }
};
</script>