Vue3 安装和使用 vue-office来实现 Word、Excel 和 PDF 文件的预览

文件格式支持：@vue-office/docx主要支持现代的 .docx 格式，对于旧的 .doc格式文件，建议先转换为 .docx。同样地，Excel 预览支持 .xlsx和 .xls格式。

复制代码

# 安装 Word (.docx) 预览组件
npm install @vue-office/docx vue-demi

# 安装 Excel (.xlsx/.xls) 预览组件
npm install @vue-office/excel vue-demi

# 安装 PDF 预览组件
npm install @vue-office/pdf vue-demi

<script setup>
import { ref } from 'vue'
// 引入预览组件
import VueOfficeDocx from '@vue-office/docx'
import VueOfficeExcel from '@vue-office/excel'
// 引入样式（重要！）
import '@vue-office/docx/lib/index.css'
import '@vue-office/excel/lib/index.css'

// 控制预览对话框的显示
const previewDialog = ref(false)
// 存储预览的文件数据（ArrayBuffer）
const previewFileData = ref(null)
// 存储当前预览的文件类型
const currentFileType = ref('')

// 预览文件方法
const handlePreviewFile = async (row) => {
  const fileUrl = row.fileUrl
  if (!fileUrl) {
    ElMessage.warning('文件路径无效')
    return
  }

  // 获取文件扩展名并判断类型
  const fileExtension = fileUrl.split('.').pop().toLowerCase()
  if (['docx'].includes(fileExtension)) {
    currentFileType.value = 'docx'
  } else if (['xlsx', 'xls'].includes(fileExtension)) {
    currentFileType.value = 'excel'
  } else {
    ElMessage.warning('暂不支持预览此文件类型')
    return
  }

  try {
    // 获取文件内容，这里假设 fileUrl 是可直接访问的URL
    const response = await fetch(fileUrl)
    if (!response.ok) throw new Error('文件获取失败')
    const arrayBuffer = await response.arrayBuffer()
    previewFileData.value = arrayBuffer
    previewDialog.value = true // 打开预览对话框
  } catch (error) {
    console.error('预览文件失败:', error)
    ElMessage.error('文件加载失败，请重试')
  }
}

// 关闭预览
const closePreview = () => {
  previewDialog.value = false
  previewFileData.value = null
  currentFileType.value = ''
}
</script>

<template>
  <!-- 你的现有表格代码 -->
  <el-table-column ... >
    <template #default="scope">
      <el-button ... @click="handlePreviewFile(scope.row)">预览文件</el-button>
    </template>
  </el-table-column>

  <!-- 预览对话框 -->
  <el-dialog 
    v-model="previewDialog" 
    title="文件预览" 
    width="80%" 
    :before-close="closePreview"
  >
    <div v-if="currentFileType === 'docx'">
      <vue-office-docx :src="previewFileData" />
    </div>
    <div v-else-if="currentFileType === 'excel'">
      <vue-office-excel :src="previewFileData" />
    </div>
  </el-dialog>
</template>