前端组件库 PDF、word、Excel预览

1.下载文件预览库（如果只用PDF可以分开下）

npm install @vue-office/docx @vue-office/pdf @vue-office/excel 

2.使用（我这里是根据条件渲染的，src里面直接放地址就可以显示了）

<!-- PDF预览 -->
<div v-if="previewFile.type === 'pdf'" class="pdf-preview">
  <vue-office-pdf :src="previewFile.url" />
</div>
<!-- Word预览 -->
<div v-else-if="previewFile.type === 'word'" class="word-preview">
  <vue-office-docx :src="previewFile.url" />
</div>
<!-- Excel预览 -->
<div v-else-if="previewFile.type === 'excel'" class="excel-preview">
  <vue-office-excel :src="previewFile.url" />
</div>


<--js部分-->
<script setup>
import VueOfficeDocx from "@vue-office/docx";
import VueOfficeExcel from "@vue-office/excel";
import VueOfficePdf from "@vue-office/pdf";
</script>

3.效果图