Operation processes on invoices

app/Views/Components/PdfViewer.vue

@@ -0,0 +1,46 @@
+<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>