web/components/PdfPreview/index.vue

<template>
  <vue-pdf-app :pdf="src"></vue-pdf-app>
</template>
<script lang="ts" setup>
import { defineAsyncComponent } from "vue";
// import VuePdfApp from "vue3-pdf-app";
import "vue3-pdf-app/dist/icons/main.css";
const props = defineProps({
  src: {
    type: String,
    default: "",
  },
});
const VuePdfApp = defineAsyncComponent(() => import("vue3-pdf-app"));
</script>
<style lang="scss" scoped>
#vuePdfApp {
  :deep(.toolbar) {
    z-index: 3;
  }

  :deep(#sidebarContainer) {
    z-index: 3;
  }

  :deep(#errorWrapper) {
    z-index: 3;
  }

  :deep(#thumbnailView) {
    width: 100%;
  }
}
</style>