发版环境

fuliqi

2024-07-08 8296816e95bc4c4cba378d2e4bc4d0e1d2d14f90

 src/components/PDFViewer/index.vue

New file
@@ -0,0 +1,41 @@
<template>
  <div class="pdf-container">
    <iframe :src="fileUrl" width="100%" height="100%"></iframe>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const props = defineProps({
  pdfUrl: {
    type: String,
    required: true
  }
});
const viewerUrl = '/pdfjs/web/viewer.html?file='; // pdfjs文件地址

const fileUrl = ref('');


const renderPDF = () => {
  fileUrl.value = viewerUrl + encodeURIComponent(props.pdfUrl);
};

onMounted(() => {
  renderPDF();
})

</script>

<style lang="scss" scoped>
.pdf-container {
  width: 100%;
  height: 100%;

  .pdf-canvas {
    width: 100%;
    height: 100%;
  }
}
</style>