Added ENV Var for PDF Viewer License
This commit is contained in:
@@ -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 downloadCtrl = unref(downloadControl)
|
||||
const handleDownloadFile = async () => {
|
||||
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>
|
||||
Reference in New Issue
Block a user