JG-CLIENT-TEMP/src/components/PDFView/index.vue

<template>
  <VuePdfEmbed
    :source="pdfSource"
    annotation-layer
    text-layer
    @click="showPdf"
  />
  <el-drawer
    v-model="visible"
    :footer="false"
    :header="false"
    :show-close="false"
    destroy-on-close
    direction="rtl"
    size="972px"
  >
    <VuePdfEmbed :source="pdfSource" annotation-layer text-layer />
  </el-drawer>
</template>

<script lang="ts" setup>
import VuePdfEmbed from "vue-pdf-embed";
// essential styles
import "vue-pdf-embed/dist/style/index.css";

// optional styles
import "vue-pdf-embed/dist/style/annotationLayer.css";
import "vue-pdf-embed/dist/style/textLayer.css";

// either URL, Base64, binary, or document proxy
const props = defineProps({
  pdfSource: {
    type: String,
    required: true,
  },
});

const visible = ref(false);

const showPdf = () => {
  visible.value = true;
};
</script>

<style lang="scss" scoped></style>