Vue3集成pdf.js实现本地PDF文件预览完整教程

<template>
    <iframe :src="src" width="100%" :web.xmlheight="pdfH" style="width: 100%; height: 90%"></iframe>
</template>
<script setup lang='ts'>
import { ref, nextTick, computed, onMounted } from 'vue'
const props = defineProps({
    src: {
        type: String,
        required: true
    }
})
 
let src = computed(() => {
    // vue3的话 路径上不需要写public
    // 如果是vue2的话 要写public ->  return `/public/lib/pdfjs/web/viewer.html?file=${props.src}`
    // 我这里是本地文件测试（props.src是本地文件，必须将这个文件放在public/lib/pdfjs/web下面才行）
    return `/lib/pdfjs/web/viewer.html?file=${props.src}`
})
let pdfH = ref(100)
nextTick(() => {
    pdfH.value = document.documentElement.clientHeight - 68
})
onMounted(() => {
})
</script>

<script setup lang="ts">
import { ref } from 'vue';
import PDF from '@/components/PDF.vue'
let dySrc = ref('')
const dialogVisible = ref(false)
//? 打开新页面预览
const showPDF = async () => {
    dySrc.value = '/lib/pdfjs/web/测试.pdf'
    //替换为实际的文档URL
    const pdfUrl = `lib/pdfjs/web/viewer.html?file=${dySrc.value}`;
    //pdfUrl是当前页面的pdf文件的URL,第二个参数'_blank'表示在新窗口中打开。
    window.open(pdfUrl, '_blank');
}
//?在弹框中显示
const showDialogPDF = () => {
    dialogVisible.value = true
    dySrc.value = '/lib/pdfjs/web/测试.pdf'
}
</script>
<template>
    <div>
        文件名(新页面打开预览)：
        <span @click="showPDF" style="color:rgb(0,174,236);cursor: pointer;">xxx.pdf</span>
    </div>
    <div>
        文件名(弹窗打开预览)：
        <span @click="showDialogPDF" style="color:rgb(0,174,236);cursor: pointer;">xxx.pdf</span>
    </div>
    <el-dialog v-model="dialogVisible" title="预览pdf">
        <p-d-f :src="dySrc"></p-d-f>
    </el-dialog>
</template>
<style>
.el-dialog {
    width: 1000px;
    height: 800px;
}
 
.el-dialog__body {
    height: 100%;
}
</style>

    // if (fileOrigin !== viewerOrigin) {
      //   throw new Error("file origin does not match viewer's");
      // }