- 安装
npm install @vue-office/pdf
- VUE组件中
<template>
<vue-office-pdf :src="pdfUrl" style="height: 100vh; border: none; box-shadow: none;" />
<empty-ele v-else />
</template>
<script setup>
import VueOfficePdf from '@vue-office/pdf';
import EmptyEle from '@/components/EmptyEle/index'; // 没有数据时的占位组件
const props = defineProps({
pdfUrl: {
type: String,
default: ''
}
});
</script>
<style scoped>
/* 这块是处理边上的灰边 */
:deep(.vue-office-pdf-wrapper) {
padding-top: 0 !important;
background-color: transparent !important;;
}
</style>
当然还有很多其他展示方式,如:iframe、vue3-pdf等。