Skip to content

Instantly share code, notes, and snippets.

@Stoltze

Stoltze/PDFViewer.vue

Last active September 20, 2022 20:03
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Stoltze/673da037a8df3340a232832bb37661f3 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Stoltze/673da037a8df3340a232832bb37661f3 to your computer and use it in GitHub Desktop.
Download ZIP
Vue3 (Script Setup) implementation of vue-pdf-embed
Raw
README.md
Raw
PDFViewer.vue
<template>
<div class="row pe-0">
<div class="col pe-0">
<vue-pdf-embed
class="border p-0 rounded-3 overflow-hidden"
ref="pdfRef"
:source="source"
:page="page.current"
@rendered="handleDocumentRender"
/>
</div>
</div>
<div class="row text-center py-3" v-if="page.loaded">
<div class="col">
<button
:disabled="page.current <= 1" @click="page.current--"
class="btn btn-sm btn-rounded-circle btn-primary">
<i class="fa-regular fa-chevrons-left"></i>
</button>
<span class="text-muted px-3">{{ page.current }} / {{ page.count }}</span>
<button
:disabled="page.current >= page.count" @click="page.current++"
class="btn btn-sm btn-rounded-circle btn-primary">
<i class="fa-regular fa-chevrons-right"></i>
</button>
</div>
</div>
</template>
<script setup>
import VuePdfEmbed from 'vue-pdf-embed'
import {reactive, ref} from "vue";
let props = defineProps({
source: String,
});
const pdfRef = ref(null);
let page = reactive([])
page.current = 1;
page.count = 1;
page.loaded = false;
function handleDocumentRender() {
page.count = pdfRef.value.pageCount
page.loaded = true;
};
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment