show render or download

src/components/admin/club/protocol/ProtocolPrintoutViewerModal.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="w-full h-full flex flex-col gap-2">
+    <div class="grow">
+      <iframe ref="viewer" class="w-full h-full" />
+    </div>
+
+    <button primary-outline class="!w-fit self-end" @click="closeModal">schließen</button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import { mapState, mapActions } from "pinia";
+import { useModalStore } from "@/stores/modal";
+import Spinner from "@/components/Spinner.vue";
+import { useProtocolPrintoutStore } from "@/stores/admin/protocolPrintout";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  computed: {
+    ...mapState(useModalStore, ["data"]),
+  },
+  mounted() {
+    this.fetchItem();
+  },
+  methods: {
+    ...mapActions(useModalStore, ["closeModal"]),
+    ...mapActions(useProtocolPrintoutStore, ["fetchProtocolPrintoutById"]),
+    fetchItem() {
+      this.fetchProtocolPrintoutById(this.data)
+        .then((response) => {
+          const blob = new Blob([response.data], { type: "application/pdf" });
+          (this.$refs.viewer as HTMLIFrameElement).src = window.URL.createObjectURL(blob);
+        })
+        .catch(() => {});
+    },
+  },
+});
+</script>

src/stores/admin/protocolPrintout.ts

@@ -2,6 +2,7 @@ import { defineStore } from "pinia";
 import { http } from "@/serverCom";
 import type { ProtocolPrintoutViewModel } from "../../viewmodels/admin/protocolPrintout.models";
 import { useProtocolStore } from "./protocol";
+import type { AxiosResponse } from "axios";
 
 export const useProtocolPrintoutStore = defineStore("protocolPrintout", {
   state: () => {
@@ -25,17 +26,11 @@ export const useProtocolPrintoutStore = defineStore("protocolPrintout", {
           this.loading = "failed";
         });
     },
-    fetchProtocolPrintoutById(printoutId: string) {
+    fetchProtocolPrintoutById(printoutId: number): Promise<AxiosResponse<any, any>> {
       const protocolId = useProtocolStore().activeProtocol;
-      this.loading = "loading";
-      http
-        .get(`/admin/protocol/${protocolId}/printout/${printoutId}`)
-        .then((result) => {
-          this.loading = "fetched";
-        })
-        .catch((err) => {
-          this.loading = "failed";
-        });
+      return http.get(`/admin/protocol/${protocolId}/printout/${printoutId}`, {
+        responseType: "blob",
+      });
     },
     createProtocolPrintout() {
       this.printing = "loading";

src/views/admin/club/protocol/ProtocolPrintout.vue

@@ -13,6 +13,14 @@
       >
         <div class="bg-primary p-2 text-white flex flex-row justify-between items-center">
           <p>{{ print.title }}</p>
+          <div class="flex flex-row">
+            <div>
+              <ViewfinderCircleIcon class="w-5 h-5 p-1 box-content cursor-pointer" @click="openPdfShow(print.id)" />
+            </div>
+            <div>
+              <ArrowDownTrayIcon class="w-5 h-5 p-1 box-content cursor-pointer" @click="downloadPdf(print.id)" />
+            </div>
+          </div>
         </div>
         <div class="p-2">
           <p>Ausdruck Nummer: {{ print.iteration }}</p>
@@ -33,12 +41,14 @@
 </template>
 
 <script setup lang="ts">
-import { defineComponent } from "vue";
+import { defineAsyncComponent, defineComponent, markRaw } from "vue";
 import { mapActions, mapState } from "pinia";
 import Spinner from "@/components/Spinner.vue";
 import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
 import FailureXMark from "@/components/FailureXMark.vue";
 import { useProtocolPrintoutStore } from "@/stores/admin/protocolPrintout";
+import { ArrowDownTrayIcon, ViewfinderCircleIcon } from "@heroicons/vue/24/outline";
+import { useModalStore } from "@/stores/modal";
 </script>
 
 <script lang="ts">
@@ -53,7 +63,32 @@ export default defineComponent({
     this.fetchProtocolPrintout();
   },
   methods: {
-    ...mapActions(useProtocolPrintoutStore, ["fetchProtocolPrintout", "createProtocolPrintout"]),
+    ...mapActions(useModalStore, ["openModal"]),
+    ...mapActions(useProtocolPrintoutStore, [
+      "fetchProtocolPrintout",
+      "createProtocolPrintout",
+      "fetchProtocolPrintoutById",
+    ]),
+    openPdfShow(id: number) {
+      this.openModal(
+        markRaw(defineAsyncComponent(() => import("@/components/admin/club/protocol/ProtocolPrintoutViewerModal.vue"))),
+        id
+      );
+    },
+    downloadPdf(id: number) {
+      let clickedOn = this.printout.find((p) => p.id == id);
+      this.fetchProtocolPrintoutById(id)
+        .then((response) => {
+          const fileURL = window.URL.createObjectURL(new Blob([response.data]));
+          const fileLink = document.createElement("a");
+          fileLink.href = fileURL;
+          fileLink.setAttribute("download", clickedOn?.title ? clickedOn.title + ".pdf" : "Protokoll.pdf");
+          document.body.appendChild(fileLink);
+          fileLink.click();
+          fileLink.remove();
+        })
+        .catch(() => {});
+    },
   },
 });
 </script>