Skip to content

Instantly share code, notes, and snippets.

@uno-de-piera

uno-de-piera/PdfViewer.vue Secret

Created Aug 19, 2019
Embed
What would you like to do?
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.