<script setup lang="ts">
|
import Pdfh5 from "pdfh5"
|
import { ref, onMounted, onUnmounted } from 'vue'
|
|
const container = ref<HTMLElement>()
|
let pdfViewer: any = null
|
|
const props = defineProps({
|
url: {
|
type: String,
|
required: true
|
}
|
})
|
|
onMounted(async () => {
|
try {
|
// 创建PDF查看器
|
pdfViewer = new Pdfh5(container.value!, {
|
pdfurl: props.url,
|
textLayer: true,
|
workerSrc: '/examination/user/pdf.worker.min.js',
|
cMapUrl: '/examination/user/cmaps/',
|
standardFontDataUrl: '/examination/user/standard_fonts/',
|
iccUrl: '/examination/user/iccs/',
|
wasmUrl: '/examination/user/wasm/'
|
});
|
const appElement = document.getElementById('app')
|
|
} catch (error) {
|
console.error('PDF初始化失败:', error);
|
}
|
})
|
|
onUnmounted(() => {
|
if (pdfViewer && typeof pdfViewer.destroy === 'function') {
|
pdfViewer.destroy()
|
}
|
})
|
</script>
|
|
<template>
|
<div class="pdf-container" ref="container"></div>
|
</template>
|
|
<style scoped>
|
.pdf-container {
|
width: 100%;
|
height: 100%;
|
}
|
</style>
|
