84 lines
2 KiB
Vue
84 lines
2 KiB
Vue
<script setup lang="ts">
|
|
import { computed, ref } from 'vue';
|
|
import { VuePDF, usePDF } from '@tato30/vue-pdf';
|
|
|
|
const props = withDefaults(
|
|
defineProps<{ url: string; file: File | undefined }>(),
|
|
{},
|
|
);
|
|
|
|
const scale = ref(1);
|
|
const page = ref(1);
|
|
const { pdf, pages } = usePDF(computed(() => props.url));
|
|
</script>
|
|
|
|
<template>
|
|
<div class="col full-height column no-wrap">
|
|
<div
|
|
class="surface-0 bordered row items-center justify-evenly q-pa-sm no-wrap"
|
|
style="height: 50px"
|
|
>
|
|
<q-btn
|
|
@click="page = page > 1 ? page - 1 : page"
|
|
class="btn-next"
|
|
icon="mdi-chevron-left"
|
|
unelevated
|
|
dense
|
|
id="btn-prev-page-top"
|
|
/>
|
|
|
|
<div class="ellipsis">Page {{ page }} of {{ pages }}</div>
|
|
|
|
<q-btn
|
|
@click="scale = scale > 0.25 ? scale - 0.25 : scale"
|
|
flat
|
|
dense
|
|
round
|
|
size="12px"
|
|
icon="mdi-magnify-minus-outline"
|
|
class="app-text-dark"
|
|
>
|
|
<q-tooltip>{{ $t('zoomOut') }}</q-tooltip>
|
|
</q-btn>
|
|
<div>{{ scale * 100 }}%</div>
|
|
|
|
<q-btn
|
|
flat
|
|
dense
|
|
round
|
|
size="12px"
|
|
class="app-text-dark"
|
|
icon="mdi-magnify-plus-outline"
|
|
@click="scale = scale < 2 ? scale + 0.25 : scale"
|
|
>
|
|
<q-tooltip>{{ $t('general.zoomIn') }}</q-tooltip>
|
|
</q-btn>
|
|
|
|
<q-btn
|
|
@click="page = page < pages ? page + 1 : page"
|
|
class="btn-next"
|
|
icon="mdi-chevron-right"
|
|
unelevated
|
|
dense
|
|
id="btn-prev-page-top"
|
|
/>
|
|
</div>
|
|
|
|
<div
|
|
class="flex flex-center surface-2 bordered-l bordered-r bordered-b full-height scroll"
|
|
>
|
|
<VuePDF
|
|
v-if="
|
|
url?.split('?').at(0)?.endsWith('.pdf') ||
|
|
file?.type === 'application/pdf'
|
|
"
|
|
class="q-py-md"
|
|
:pdf="pdf"
|
|
:page="page"
|
|
:scale="scale"
|
|
/>
|
|
|
|
<q-img v-else class="q-py-md full-width" :src="url" />
|
|
</div>
|
|
</div>
|
|
</template>
|