• 缺点：显示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('');	// 文件地址