当前位置：首页 > article >正文

Vue在线预览excel、word、ppt等格式数据。

article 2025/8/18 15:35:06

前言

1.安装库

2.预览文件子组件代码

3、新建store/system.ts

4、父页面进行使用

总结

前言

纯前端处理文件预览，包含excel、word、ppt、txt等格式，不需要后端服务器进行部署，并且内网也可以使用。

1.安装库

npm install @vue-office/docx @vue-office/excel @vue-office/pdf
# 或
yarn add @vue-office/docx @vue-office/excel @vue-office/pdf

2.预览文件子组件代码

<template><div class="fileView"><n-modal v-model:show="fileViewVisible"><n-cardstyle="width: 65%;position: fixed;top: 50px;left: 50%;transform: translateX(-50%);":title="sysStore.fileViewInfo.name":bordered="true"size="medium"role="dialog"aria-modal="true"><template #header-extra><n-button circle @click="fileViewVisible = false"><template #icon><n-icon><Close /></n-icon></template></n-button></template><div><iframev-if="sysStore.fileViewInfo.fileType === 'txt'"style="width: 100%; height: calc(100vh - 190px)":src="sysStore.fileViewInfo.viewUrl"frameborder="0"></iframe><vue-office-pdfv-if="sysStore.fileViewInfo.fileType === 'pdf'"style="width: 100%; height: calc(100vh - 180px)":src="sysStore.fileViewInfo.viewUrl"frameborder="0"></vue-office-pdf><vue-office-docxv-if="sysStore.fileViewInfo.fileType === 'doc'"style="width: 100%; height: calc(100vh - 180px)":src="sysStore.fileViewInfo.viewUrl"frameborder="0"></vue-office-docx><vue-office-excelv-if="sysStore.fileViewInfo.fileType === 'xlsx'"style="width: 100%; height: calc(100vh - 180px)":src="sysStore.fileViewInfo.viewUrl"frameborder="0"></vue-office-excel></div></n-card></n-modal></div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import useSystemStore from "@/store/system";
import { Close } from "@vicons/ionicons5";
// 引入VueOffice组件
import VueOfficeDocx from "@vue-office/docx";
import VueOfficeExcel from "@vue-office/excel";
import VueOfficePdf from "@vue-office/pdf";
// 引入相关样式
import "@vue-office/docx/lib/index.css";
import "@vue-office/excel/lib/index.css";const sysStore = useSystemStore();const fileViewVisible = ref(false);const show = () => {fileViewVisible.value = true;
};// 监听外部变化
watch(() => props.visible, (newVal) => {fileViewVisible.value = newValue
}, {immediate: true
})
// 暴漏show给父组件使用
defineExpose({show,
});
</script>
<style lang="less" scoped></style>

3、新建store/system.ts

代码如下：

import { defineStore } from "pinia";interface State {fileViewInfo: any; // 文件预览信息
}const useSystemStore = defineStore("system", {state: (): State => ({fileViewInfo: {},}),actions: {setFileViewInfo(val: any) {this.fileViewInfo = val;},},
});export default useSystemStore;

4、父页面进行使用

<template><n-space class="file-view" style="gap: 8px 8px" :inline="true"><divclass="file-item"v-for="(file, index) in fileComp":key="index"@click="fileView(file)"><div class="file-icon"><img width="28" :src="file.iconIamge" alt="" /></div></div></n-space><FilePreviewDialog v-model:visible="obj.showDialog" ref="filePreviewDialogRef" />
</template>
<script lang="ts" setup>import { computed, ref } from "vue";
// 以下icon是不同后缀名的文件图片 可要可不要
import excelImg from "@/assets/images/fileIcon/excel.png";
import pdfImg from "@/assets/images/fileIcon/pdf.png";
import wordImg from "@/assets/images/fileIcon/word.png";
import textImg from "@/assets/images/fileIcon/text.png";
import unknownImg from "@/assets/images/fileIcon/unknown.png";
import { getFileSize } from "@/utils/useFunc";
import useSystemStore from "@/store/system";
import FilePreviewDialog from "@/components/FilePreviewDialog.vue";const filePreviewDialogRef = ref<any>();
const props = defineProps({files: {type: [Object,Array],required: true,},role: {type: String,},
});// 引入vuex
const sysStore = useSystemStore();// 文件信息
const obj = reactive({showDialog: false, // 是否展示附件fileUrl: [] // 附件地址
})const getIcon = (type: string) => {type = type.toLowerCase();let fileType: "doc" | "pdf" | "xlsx" | "txt" | "" = "";let iconIamge = "";const docMap = ["doc","docx","application/msword","application/vnd.openxmlformats-officedocument.wordprocessingml.document",];const pdfMap = ["application/pdf", "pdf"];const xlsxMap = ["application/vnd.ms-excel","application/vnd.openxmlformats-officedocument.spreadsheetml.sheet","xls","xlsx",];const textMap = ["txt", "text/plain", "text"];if (docMap.includes(type)) {fileType = "doc";iconIamge = wordImg;} else if (pdfMap.includes(type)) {fileType = "pdf";iconIamge = pdfImg;} else if (xlsxMap.includes(type)) {fileType = "xlsx";iconIamge = excelImg;} else if (textMap.includes(type)) {fileType = "txt";iconIamge = textImg;} else {fileType = "";iconIamge = unknownImg;}return {fileType,iconIamge: iconIamge,};
};// 获取文件数据
const fileView = async(item) => {
const {id} = item
const res = await getPolicy(id)
const {url,name,size,mime_type} = res.data
// 这里拿到的数据：url：完整的url文件流地址// name： 文件名//size： 文件字节大小// mime_type： 文件对应的类型 譬如txt对应 text/plain
// 获取文件后缀类型
const {fileType} = getIcon(mime_type)
const fileInfo = {name,fileType,type: mime_type,size,viewUrl: url
}// 更新文件信息sysStore.setFileViewInfo(fileInfo);
// 先关闭
obj.showDialog = false
// 确保dom更新后再次打卡
await nextTick()
obj.showDialog = true
};</script><style lang="less" scoped>
.file-view {.file-item {display: flex;align-items: center;border: 1px solid var(--baseColor);padding: 8px;cursor: pointer;min-width: 240px;max-width: 300px;border-radius: 5px;.file-icon {margin-right: 5px;}.file-info {max-width: calc(100% - 28px);.file-size {font-size: var(--fontSizeSmall);}}}
}
</style>