vue-office-excel组件无法正常显示Excel文件问题求助

核心问题及修复步骤 #

1. 缺少ref导入导致配置未生效
   你在<script setup>里用了ref定义options，但没从Vue中导入ref，这会让options不是响应式对象，组件无法正确读取配置，直接不渲染。
   修复：在script开头添加导入语句：

   import { ref } from 'vue'
   

2. 静态地址无需动态绑定（可选优化）
   你的src是固定字符串，没必要用:src动态绑定，直接写成src="http://static.shanhuxueyuan.com/test.xlsx"更规范，避免不必要的响应式解析。

3. 验证依赖安装完整性
   有时候依赖安装可能存在缓存或残缺，执行以下操作：

   • 删除node_modules文件夹和package-lock.json（或yarn.lock）
   • 重新执行npm install或yarn install

4. 检查网络请求与元素状态

   • 打开Chrome控制台的「Network」标签，查看Excel文件的请求是否成功返回（状态码200）
   • 切换到「Elements」标签，搜索vue-office-excel，看组件是否被渲染但样式隐藏了

修改后的完整代码示例 #

<template>
    <vue-office-excel 
        src="http://static.shanhuxueyuan.com/test.xlsx" 
        :options="options" 
        @rendered="rendered" 
        @error="error"
        style="height: 100vh;" 
    />
</template>

<script setup>
import { ref } from 'vue'
import { VueOfficeExcel } from '@vue-office/excel'
import '@vue-office/excel/lib/index.css'

const options = ref({
  xls: true,       
  minColLength: 0,  
  minRowLength: 0,  
  widthOffset: 10,  
  heightOffset: 10, 
  beforeTransformData: (workbookData) => workbookData, 
  transformData: (workbookData) => workbookData
});

const rendered = () => {
    console.log('Excel rendered')
}

const error = (error) => {
    console.error('Error loading Excel', error)
}
</script>

内容的提问来源于stack exchange，提问作者萝莉w