Introduced PDFViewer

components/PDFViewer.vue

@@ -0,0 +1,50 @@
+<script setup>
+import { ref, onMounted, watch } from "vue"
+import { VPdfViewer } from "@vue-pdf-viewer/viewer"
+
+const props = defineProps({
+  // Beispiel: "FEDEO/26/filesbyid/11990345-8711-4e23-8851-c50f028fc915/RE25-1081.pdf"
+  fileId: {
+    type: String,
+    required: true,
+  },
+  scale: {
+    type: Number,
+    default: 1.2,
+  },
+})
+
+const pdfSrc = ref(null) // ObjectURL fürs Viewer
+const { $api } = useNuxtApp()
+
+async function loadPdf(id) {
+  try {
+    const arrayBuffer = await $api(`/api/files/download/${id}`, {
+      method: "POST",
+      responseType: "arrayBuffer", // wichtig für pdf.js
+    })
+    const blob = new Blob([arrayBuffer], { type: "application/pdf" })
+    pdfSrc.value = URL.createObjectURL(blob)
+  } catch (err) {
+    console.error("Fehler beim Laden der PDF:", err)
+  }
+}
+
+onMounted(() => loadPdf(props.fileId))
+watch(() => props.fileId, (newPath) => {
+  if (newPath) loadPdf(newPath)
+})
+</script>
+
+<template>
+  <div class="pdf-container">
+    <VPdfViewer v-if="pdfSrc" :src="pdfSrc" style="height: 80vh; width: 100%;" />
+    <div v-else>Lade PDF…</div>
+  </div></template>
+
+<style scoped>
+.pdf-container {
+  width: 100%;
+  height: 100%;
+}
+</style>