file download component

components/ContentBuilder.vue

@@ -9,6 +9,7 @@
         <DynamicZoneFullImage v-else-if="item.__component == 'dynamic-zone.full-image'" :data="item" />
         <DynamicZoneFullText v-else-if="item.__component == 'dynamic-zone.full-text'" :data="item" />
         <DynamicZoneGallery v-else-if="item.__component == 'dynamic-zone.gallery'" :data="item" />
+        <DynamicZoneFileDownload v-else-if="item.__component == 'dynamic-zone.file-download'" :data="item" />
         <SharedList v-else-if="item.__component == 'shared.list'" :data="item" />
         <br />
       </div>

components/dynamicZone/FileDownload.vue

@@ -0,0 +1,42 @@
+<template>
+  <div v-if="showComponent" class="flex flex-col gap-2 w-full min-h-fit max-w-4xl mx-auto">
+    <h1 class="text-center">{{ data?.title }}</h1>
+    <iframe v-if="data.file.mime == 'application/pdf'" :src="baseUrl + data.file.url" class="w-full h-[90vh]"></iframe>
+    <NuxtPicture
+      v-if="data.file.mime.includes('image')"
+      loading="lazy"
+      class="w-full object-cover object-center mx-auto"
+      :src="baseUrl + data?.file.url"
+      :imgAttrs="{ class: 'w-full h-full object-cover object-center' }"
+    />
+    <a
+      v-if="data.enable_download"
+      :href="baseUrl + data.file.url"
+      :download="data.file.name"
+      target="_blank"
+      class="w-fit text-primary underline"
+    >
+      Datei herunterladen
+    </a>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { PropType } from "vue";
+import type DynamicZoneFileDownload from "../../types/component/dynamicZoneFileDownload";
+
+const runtimeConfig = useRuntimeConfig();
+const baseUrl = runtimeConfig.public.strapi.url;
+
+const props = defineProps({
+  data: Object as PropType<DynamicZoneFileDownload>,
+});
+
+const showComponent = computed(() => {
+  if (props.data.file.mime == "application/pdf" || props.data.file.mime.includes("image")) {
+    return true;
+  } else {
+    return props.data.enable_download;
+  }
+});
+</script>