vue3中使用pdf.js来预览文件（本地文件测试）

目录

1.下载pdf.js库      

2. 放入项目中

3.新建PDF组件

4.在HomeView.vue文件中使用PDF.vue

5.跨域问题

1.下载pdf.js库      

下载地址

下载后的文件解压结构是这样的

2. 放入项目中

在vue3中public文件夹下新建 lib/pdfjs 文件 , 将解压后的文件放入pdfjs文件夹下

3.新建PDF组件

在src/components新建PDF.vue组件

<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>

4.在HomeView.vue文件中使用PDF.vue

这里我使用了   打开新页面预览和弹窗预览  两种方式来预览

<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>

注意：

本地文件测试 必须将pdf文件放在public/lib/pdfjs/web下面才行

5.跨域问题

如果出现跨域问题，将  viewer.js文件中的以下代码注释掉就可以了

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