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");
// }
