前端组件库 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.效果图