vue3项目引用vue-office组件
2026/6/18 22:07:26 网站建设 项目流程

1. 安装 (vue-demi 0.14.10版本的比较稳定)

npm install @vue-office/excel vue-demi

2. Vite 配置优化

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

3. 页面中引用

<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>

效果

需要专业的网站建设服务?

联系我们获取免费的网站建设咨询和方案报价,让我们帮助您实现业务目标

立即咨询