vue3项目引用vue-office组件

荔枝吖2026-06-18 8:52

安装（vue-demi 0.14.10版本的比较稳定）

javascript 复制代码

npm install @vue-office/excel vue-demi

Vite 配置优化

javascript 复制代码

import { resolve } from 'path'
resolve: {
    alias: {
      '@vue-office': resolve(__dirname, 'node_modules/@vue-office')
    },

页面中引用

html 复制代码

<template>
  <div class="third-step">
    <VueOfficeExcel v-if="showExcel" :src="excelUrl" style="width: 100%; height: 400px;" />
  </div>
</template>

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

const excelUrl = '/example.xlsx'
const showExcel = ref(false)

onMounted(() => {
  showExcel.value = true
})
</script>

效果