Added ENV Var for PDF Viewer License

components/PDFViewer.client.vue

@@ -0,0 +1,212 @@
+<script setup>
+import { ref, onMounted, watch } from "vue"
+import { VPdfViewer, useLicense } from "@vue-pdf-viewer/viewer"
+
+const props = defineProps({
+  // Beispiel: "FEDEO/26/filesbyid/11990345-8711-4e23-8851-c50f028fc915/RE25-1081.pdf"
+  fileId: {
+    type: String,
+  },
+  uri: {
+    type: String,
+  },
+  scale: {
+    type: Number,
+    default: 1.2,
+  },
+})
+
+const config = useRuntimeConfig()
+useLicense(config.public.pdfViewerLicense || "eyJkYXRhIjoiZXlKMElqb2laR1YyWld4dmNHVnlJaXdpWVhaMUlqb3hOemt3TmpNNU9UazVMQ0prYlNJNklteHZZMkZzYUc5emREb3pNREF3SWl3aWJpSTZJbVkxT1RRM1ptWTBOVFJsTkdKaU16a2lMQ0psZUhBaU9qRTNPVEEyTXprNU9Ua3NJbVJ0ZENJNkluTndaV05wWm1saklpd2ljQ0k2SW5acFpYZGxjaUo5Iiwic2lnbmF0dXJlIjoibGVpVmNkbENzQStiNCt5ODBNVnZzY2lHcEpjZ3F4T2M1R2V3VFJJVzY5SkQwSGxteERRcmtmSzQwOWhzYXdJN2pSVXM3QmdvNzJIU3ZYRmZtS1Rhejl1N0o0eEt0Nk1VL2E5cjFMblA1aUZzZFBtemRMbFJFSDJoSG00Zmk2Y25UbEhnQTdHekkrL2JVVlJhUEJXYWFDdlFSK3ByRHg2NHl4aFhjOElPT2swb1pldWtKc2tCTjNCS0NiZ3VkSGhmbXB5TE9WUDc4SUR4U1FNR3BOU2I4eWRqakdQSHBuNjZLQWVOWGpRc05EbHNIdmJkaFFyNk1ZaldzV3JkRm50ditPR2FyT2MwQzJLNVJmZkRKWTBldVpXOFNiRTRLNlJkWTVSY084eVpBNzcrQWVlV0hOdHg0SllhV1hFMW5sYmZLZDVvM3V6b0dLTFYzODBUMmlvSERnPT0ifQ==")
+
+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(() => {
+  if(props.fileId) {
+    loadPdf(props.fileId)
+  } else if(props.uri) {
+    pdfSrc.value = props.uri
+  }
+
+  //window.addEventListener("resize", handleZoomTool("pageWidth"), true);
+
+})
+watch(() => props.fileId, (newPath) => {
+  if (newPath) loadPdf(newPath)
+})
+
+const vpvRef = ref(null);
+
+//Zoom Control
+
+const zoomControl = computed(() => vpvRef.value?.zoomControl)
+
+const currentScale = computed(() => {
+  return zoomControl.value?.scale
+})
+
+const handleZoomTool = (type) => {
+  console.log(type)
+  const zoomCtrl = unref(zoomControl)
+  if (!zoomCtrl) return
+
+  const scale = unref(currentScale)
+  if (type === "in") {
+    scale && zoomCtrl.zoom(scale + 0.25)
+  } else if (type === "out") {
+    scale && zoomCtrl.zoom(scale - 0.25)
+  } else {
+    zoomCtrl.zoom(type)
+  }
+}
+//Page Control
+const pageControl = computed(() => vpvRef.value?.pageControl)
+const currentPageInput = computed(() => pageControl.value?.currentPage)
+const searchControl = computed(() => vpvRef.value?.searchControl)
+const totalMatches = computed(() => searchControl.value?.searchMatches?.totalMatches)
+
+const isNextPageButtonDisable = computed(() =>
+    pageControl.value?.currentPage === pageControl.value?.totalPages
+)
+
+const isPreviousPageButtonDisable = computed(() =>
+    pageControl.value?.currentPage === 1
+)
+
+const prevPage = () => {
+  const isFirstPage = pageControl.value?.currentPage === 1
+  if (isFirstPage) return
+  pageControl.value?.goToPage(pageControl.value?.currentPage - 1)
+}
+
+const nextPage = () => {
+  const isLastPage = pageControl.value?.currentPage === pageControl.value?.totalPages
+  if (isLastPage) return
+  pageControl.value?.goToPage(pageControl.value?.currentPage + 1)
+}
+
+const handleKeyPress = (event) => {
+  if (event.key === "Enter") {
+    handlePageInput(event)
+  }
+}
+
+//Handle Download
+const downloadControl = computed(() => vpvRef.value?.downloadControl)
+
+const handleDownloadFile = async () => {
+  await useFiles().downloadFile(props.fileId)
+
+  /*const downloadCtrl = unref(downloadControl)
+  if (!downloadCtrl) return
+  downloadCtrl.download()*/
+}
+
+watch(downloadControl, (downloadCtrl) => {
+  if (!downloadCtrl) return
+
+  downloadCtrl.onError = (error) => {
+    console.log("Download error", error)
+  }
+
+  downloadCtrl.onComplete = () => {
+    console.log("Download completed")
+  }
+})
+
+</script>
+
+<template>
+  <div class="flex flex-col gap-4 justify-self-center">
+    <div class="flex items-center gap-4 text-[#7862FF] bg-pale-blue border-[#D7D1FB] rounded-lg p-2 justify-center">
+
+      <!-- Zoom out button -->
+      <UButton
+          @click="() => handleZoomTool('pageWidth')"
+          icon="i-heroicons-document-text"
+          variant="outline"
+      ></UButton>
+
+      <UButton
+          @click="() => handleZoomTool('out')"
+          icon="i-heroicons-magnifying-glass-minus"
+          variant="outline"
+      ></UButton>
+
+      <!-- Zoom in button -->
+      <UButton
+          @click="() => handleZoomTool('in')"
+          icon="i-heroicons-magnifying-glass-plus"
+          variant="outline"
+      ></UButton>
+      <UButton
+        @click="handleDownloadFile"
+        variant="outline"
+        icon="i-heroicons-arrow-down-on-square"
+      />
+      <UButton
+          @click="prevPage"
+          :disabled="isPreviousPageButtonDisable"
+          icon="i-heroicons-chevron-up"
+          variant="outline"
+      ></UButton>
+
+
+
+      <!-- Page number input and total pages display -->
+      <div class="flex items-center text-sm font-normal">
+        <UInput
+            v-model="currentPageInput"
+            class="w-24 h-8 rounded-sm focus:outline-none"
+            @change="handleKeyPress"
+        >
+          <template #trailing>
+            / {{ pageControl?.totalPages }}
+          </template>
+        </UInput>
+      </div>
+
+      <!-- Next page button -->
+      <UButton
+          @click="nextPage"
+          :disabled="isNextPageButtonDisable"
+          icon="i-heroicons-chevron-down"
+          variant="outline"
+      ></UButton>
+    </div>
+  </div>
+  <div class="pdf-container">
+    <VPdfViewer
+        v-if="pdfSrc"
+        :src="pdfSrc"
+        style="height: 78vh; width: 100%;"
+        :toolbar-options="false"
+        ref="vpvRef"
+    />
+    <div v-else>
+      <UProgress
+          class="mt-5 w-2/3 mx-auto"
+          animation="carousel"></UProgress>
+    </div>
+  </div></template>
+
+<style scoped>
+.pdf-container {
+  width: 100%;
+  height: 100%;
+}
+</style>