46 lines
1013 B
Vue
46 lines
1013 B
Vue
<script setup>
|
|
import { ref, onMounted } from "vue"
|
|
import { VuePDF, usePDF } from '@tato30/vue-pdf'
|
|
|
|
const props = defineProps({
|
|
url: String
|
|
})
|
|
|
|
|
|
|
|
const page = ref(1)
|
|
const { pdf, pages } = usePDF(props.url)
|
|
|
|
|
|
</script>
|
|
<template>
|
|
<div>
|
|
<div class="mareike-invoice-pdfview-controls">
|
|
<button @click="page = page > 1 ? page - 1 : page" class="button mareike-button page-switch-button">
|
|
Vorherige Seite
|
|
</button>
|
|
<span>{{ page }} / {{ pages }}</span>
|
|
|
|
<button @click="page = page < pages ? page + 1 : page" class="button mareike-button page-switch-button">
|
|
Nächste Seite
|
|
</button>
|
|
|
|
<VuePDF :pdf="pdf" :page="page" class="mareike_pdv_view" fitParent="true" cale="0.9" height="90"/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.page-switch-button {
|
|
padding: 8px 20px !important;
|
|
width: 200px !important;
|
|
margin: 0 10px !important;
|
|
}
|
|
|
|
.mareike-invoice-pdfview-controls {
|
|
position: relative;
|
|
top: -50px;
|
|
text-align: center;
|
|
}
|
|
|
|
</style> |