Added ENV Var for PDF Viewer License

components/PDFViewer.client.vue

@@ -1,12 +1,14 @@
 <script setup>
 import { ref, onMounted, watch } from "vue"
-import { VPdfViewer } from "@vue-pdf-viewer/viewer"
+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,
-    required: true,
+  },
+  uri: {
+    type: String,
   },
   scale: {
     type: Number,
@@ -14,6 +16,9 @@ const props = defineProps({
   },
 })
 
+const config = useRuntimeConfig()
+useLicense(config.public.pdfViewerLicense || "eyJkYXRhIjoiZXlKMElqb2laR1YyWld4dmNHVnlJaXdpWVhaMUlqb3hOemt3TmpNNU9UazVMQ0prYlNJNklteHZZMkZzYUc5emREb3pNREF3SWl3aWJpSTZJbVkxT1RRM1ptWTBOVFJsTkdKaU16a2lMQ0psZUhBaU9qRTNPVEEyTXprNU9Ua3NJbVJ0ZENJNkluTndaV05wWm1saklpd2ljQ0k2SW5acFpYZGxjaUo5Iiwic2lnbmF0dXJlIjoibGVpVmNkbENzQStiNCt5ODBNVnZzY2lHcEpjZ3F4T2M1R2V3VFJJVzY5SkQwSGxteERRcmtmSzQwOWhzYXdJN2pSVXM3QmdvNzJIU3ZYRmZtS1Rhejl1N0o0eEt0Nk1VL2E5cjFMblA1aUZzZFBtemRMbFJFSDJoSG00Zmk2Y25UbEhnQTdHekkrL2JVVlJhUEJXYWFDdlFSK3ByRHg2NHl4aFhjOElPT2swb1pldWtKc2tCTjNCS0NiZ3VkSGhmbXB5TE9WUDc4SUR4U1FNR3BOU2I4eWRqakdQSHBuNjZLQWVOWGpRc05EbHNIdmJkaFFyNk1ZaldzV3JkRm50ditPR2FyT2MwQzJLNVJmZkRKWTBldVpXOFNiRTRLNlJkWTVSY084eVpBNzcrQWVlV0hOdHg0SllhV1hFMW5sYmZLZDVvM3V6b0dLTFYzODBUMmlvSERnPT0ifQ==")
+
 const pdfSrc = ref(null) // ObjectURL fürs Viewer
 const { $api } = useNuxtApp()
 
@@ -30,7 +35,16 @@ async function loadPdf(id) {
   }
 }
 
-onMounted(() => loadPdf(props.fileId))
+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)
 })
@@ -38,6 +52,7 @@ watch(() => props.fileId, (newPath) => {
 const vpvRef = ref(null);
 
 //Zoom Control
+
 const zoomControl = computed(() => vpvRef.value?.zoomControl)
 
 const currentScale = computed(() => {
@@ -45,6 +60,7 @@ const currentScale = computed(() => {
 })
 
 const handleZoomTool = (type) => {
+  console.log(type)
   const zoomCtrl = unref(zoomControl)
   if (!zoomCtrl) return
 
@@ -57,7 +73,6 @@ const handleZoomTool = (type) => {
     zoomCtrl.zoom(type)
   }
 }
-
 //Page Control
 const pageControl = computed(() => vpvRef.value?.pageControl)
 const currentPageInput = computed(() => pageControl.value?.currentPage)
@@ -93,10 +108,12 @@ const handleKeyPress = (event) => {
 //Handle Download
 const downloadControl = computed(() => vpvRef.value?.downloadControl)
 
-const handleDownloadFile = () => {
+const handleDownloadFile = async () => {
-  const downloadCtrl = unref(downloadControl)
+  await useFiles().downloadFile(props.fileId)
+
+  /*const downloadCtrl = unref(downloadControl)
   if (!downloadCtrl) return
-  downloadCtrl.download()
+  downloadCtrl.download()*/
 }
 
 watch(downloadControl, (downloadCtrl) => {
@@ -136,6 +153,11 @@ watch(downloadControl, (downloadCtrl) => {
           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"
@@ -143,11 +165,7 @@ watch(downloadControl, (downloadCtrl) => {
           variant="outline"
       ></UButton>
 
-      <UButton
+
-        @click="handleDownloadFile"
-        variant="outline"
-        icon="i-heroicons-arrow-down-on-square"
-      />
 
       <!-- Page number input and total pages display -->
       <div class="flex items-center text-sm font-normal">
@@ -179,7 +197,11 @@ watch(downloadControl, (downloadCtrl) => {
         :toolbar-options="false"
         ref="vpvRef"
     />
-    <div v-else>Lade PDF…</div>
+    <div v-else>
+      <UProgress
+          class="mt-5 w-2/3 mx-auto"
+          animation="carousel"></UProgress>
+    </div>
   </div></template>
 
 <style scoped>

nuxt.config.ts

@@ -58,8 +58,10 @@ export default defineNuxtConfig({
   },
 
     runtimeConfig: {
+
       public: {
-          apiBase: ''
+          apiBase: '',
+          pdfviewerLicense: ''
       }
     },