1.下载文件预览库(如果只用PDF可以分开下)
npm install @vue-office/docx @vue-office/pdf @vue-office/excel
2.使用(我这里是根据条件渲染的,src里面直接放地址就可以显示了)
html
<!-- 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.效果图
