VUE中使用vue-office/pdf预览PDF

1. 安装

npm install @vue-office/pdf

2. 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等。