vue-office 在线预览

• 缺点：显示xls文件时大部分格式无法显示，建议不预览xls格式文件

1. 安装依赖

pnpm i @vue-office/docx @vue-office/excel @vue-office/pdf -D
pnpm install docx-parser xlsx	# 不预览doc和xls文件，此插件不需要安装

2. 预览组件

AllFormatPreview.vue

<template><div class="preview-container"><!-- 加载状态 --><div v-if="loading" class="loading"><span class="spinner"></span><p>文件加载中...</p></div><!-- 错误提示 --><div v-else-if="error" class="error"><i class="icon-error"></i><p>文件预览失败：{{ errorMsg }}</p></div><!-- 图片预览 --><div v-else-if="fileType === 'image'" class="preview-wrapper"><img :src="fileUrl" alt="文件预览" class="image-preview" @load="loading = false" @error="handleError('图片加载失败')" /></div><!-- PDF预览 --><div v-else-if="fileType === 'pdf'" class="preview-wrapper"><vue-office-pdf :src="fileUrl" class="pdf-preview" @rendered="loading = false" @error="handleError('PDF渲染失败')" /></div><!-- Word预览（支持doc/docx） --><div v-else-if="fileType === 'word'" class="preview-wrapper"><vue-office-docx :src="fileUrl" class="word-preview" @rendered="loading = false" @error="handleError('Word渲染失败')" /></div><!-- Excel预览（支持xls/xlsx） --><div v-else-if="fileType === 'excel'" class="preview-wrapper"><!-- 区分xls和xlsx格式 --><template v-if="fileExt === 'xls'"><div v-if="xlsData" class="excel-preview"><table border="1" cellpadding="5" cellspacing="0"><thead><tr v-for="(row, rowIndex) in xlsData.slice(0, 1)" :key="rowIndex"><th v-for="(cell, colIndex) in row" :key="colIndex">{{ cell }}</th></tr></thead><tbody><tr v-for="(row, rowIndex) in xlsData.slice(1)" :key="rowIndex"><td v-for="(cell, colIndex) in row" :key="colIndex">{{ cell }}</td></tr></tbody></table></div></template><vue-office-excel v-else :src="fileUrl" class="excel-preview" @rendered="loading = false" @error="handleError('Excel渲染失败')" /></div><!-- 不支持的格式 --><div v-else class="unsupported"><i class="icon-unsupported"></i><p>不支持的文件格式：.{{ fileExt }}</p></div></div>
</template><script setup>import { ref, computed, onMounted } from 'vue';import VueOfficePdf from '@vue-office/pdf/lib/v3/vue-office-pdf.mjs';import VueOfficeDocx from '@vue-office/docx/lib/v3/vue-office-docx.mjs';import VueOfficeExcel from '@vue-office/excel/lib/v3/vue-office-excel.mjs';import '@vue-office/excel/lib/v3/index.css';import '@vue-office/docx/lib/v3/index.css';// 引入xlsx库用于解析xls文件import { read, utils } from 'xlsx';// 接收文件URL和文件名const props = defineProps({fileUrl: {type: String,required: true,description: '文件的完整URL',},fileName: {type: String,required: true,description: '带扩展名的文件名（如test.doc、data.xls）',},});// 状态管理const loading = ref(true);const error = ref(false);const errorMsg = ref('');const xlsData = ref(null); // 存储xls文件解析后的数据// 获取文件扩展名const fileExt = computed(() => {return props.fileName.split('.').pop()?.toLowerCase() || '';});// 判断文件类型const fileType = computed(() => {const ext = fileExt.value;if (['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'].includes(ext)) {return 'image';} else if (ext === 'pdf') {return 'pdf';} else if (['doc', 'docx'].includes(ext)) {return 'word';} else if (['xls', 'xlsx'].includes(ext)) {return 'excel';} else {return 'unknown';}});// 处理错误const handleError = (msg) => {loading.value = false;error.value = true;errorMsg.value = msg;};// 加载并解析xls文件const loadXlsFile = async () => {try {// 1.  fetch获取文件二进制数据const response = await fetch(props.fileUrl);const arrayBuffer = await response.arrayBuffer();// 2. 用xlsx库解析文件const workbook = read(arrayBuffer, { type: 'array' });// 3. 获取第一个工作表const firstSheetName = workbook.SheetNames[0];const worksheet = workbook.Sheets[firstSheetName];// 4. 转换为JSON数组（保留表头）xlsData.value = utils.sheet_to_json(worksheet, { header: 1 });loading.value = false;} catch (err) {handleError('XLS文件解析失败: ' + err.message);}};// 初始化onMounted(() => {// 图片类型直接标记加载完成if (fileType.value === 'image') {loading.value = false;}// 处理xls文件else if (fileType.value === 'excel' && fileExt.value === 'xls') {loadXlsFile();}else if (fileType.value === 'unknown') {loading.value = false;}});
</script><style scoped>.preview-container {width: 100%;height: 80vh;border: 1px solid #e0e0e0;border-radius: 8px;overflow: hidden;position: relative;}.preview-wrapper {width: 100%;height: 100%;overflow: auto;padding: 16px; /* 增加内边距，避免表格紧贴边缘 */}.loading {display: flex;flex-direction: column;align-items: center;justify-content: center;height: 100%;background: #f9f9f9;}.spinner {width: 40px;height: 40px;border: 4px solid #f0f0f0;border-top: 4px solid #42b983;border-radius: 50%;animation: spin 1s linear infinite;}.error,.unsupported {display: flex;flex-direction: column;align-items: center;justify-content: center;height: 100%;color: #ff4d4f;background: #fef2f2;}.icon-error,.icon-unsupported {font-size: 48px;margin-bottom: 16px;}.image-preview {max-width: 100%;display: block;margin: 20px auto;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);}.pdf-preview,.word-preview,.excel-preview {width: 100%;height: 100%;}/* 表格样式优化 */table {width: 100%;border-collapse: collapse;margin: 0 auto;}th,td {padding: 8px 12px;text-align: left;border: 1px solid #e0e0e0;}th {background-color: #f5f5f5;font-weight: bold;}tr:nth-child(even) {background-color: #fafafa;}@keyframes spin {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}}
</style>

3. 使用组件

<AllFormatPreview :file-name="fileName" :file-url="fileUrl"/>
const fileName = ref(''); // 文件名
const fileUrl = ref('');	// 文件地址