caimei-database-caimei/src/components/pdf-preview/pdf-preview.vue

<template>
  <div class="pdf">
    <div id="pdfView"></div>
  </div>
</template>

<script setup lang="ts">
import Pdfh5 from "pdfh5/js/pdfh5.js";
import "pdfh5/css/pdfh5.css";
import { onMounted, nextTick } from "vue";
import type { IProps } from "./index.type";

const props = defineProps<IProps>();

console.log(props);
console.log(props.url)
const initPDF = async () => {
  await nextTick(() => {
    const pdfh5 = new Pdfh5("#pdfView", {
      pdfurl: props.url,
    });

    pdfh5.on("complete", (status: string, msg: string, time: number) => {
      console.log(status, msg, time);
    });
  });
};
onMounted(() => {
  initPDF();
});
</script>

<style scoped lang="scss">
img {
  pointer-events: none !important;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
}
* {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
#pdfView {
  width: 100vw;
  height: 100%;
}
.pdf {
  width: 100vw;
  height: 100vh;
}
:deep() {
  .pdfjs .backTop, .pageNum {
    display: none !important;
  }
}
</style>