51 lines
1.2 KiB
Vue
51 lines
1.2 KiB
Vue
<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>
|