vue中excel文件 打包后不展示问题

问题:vue获取模板excel文件时,不从接口获取,从本地文件获取,打包后出现文件不存在情况

解决办法:vue打包之后,excel放置在静态文件里

public里新建文件夹excel存放.xlsx文件

在需要展示文件的地方,通过axios解析获取文件

typescript 复制代码
<template>
  <div>
    <el-button @click="getDemoExcel">获取模板文件</el-button>
  </div>
</template>
<script setup lang="ts">
import axios from 'axios';
import { ElMessage } from 'element-plus';

const getDemoExcel = () => {
  axios.get('/excel/demo.xlsx', {
    responseType: 'blob',
  }).then((response: any) => {
    const url = window.URL.createObjectURL(new Blob([response.data]));
    const link = document.createElement('a');
    link.href = url;
    link.setAttribute('download', '模板.xlsx');
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  }).catch((error: any) => {
    ElMessage.error('文件不存在')
  })
}
</script>

打包之后,文件与assest同级

相关推荐
lyyl啊辉13 小时前
2. Vue数据双向绑定
前端·vue.js
CappuccinoRose14 小时前
CSS 语法学习文档(十七)
前端·css·学习·布局·houdini·瀑布流布局·csspaintingapi
keyborad pianist14 小时前
Web开发 Day1
开发语言·前端·css·vue.js·前端框架
Never_Satisfied14 小时前
在HTML & CSS中,可能导致父元素无法根据子元素的尺寸自动调整大小的情况
前端·css·html
We་ct14 小时前
LeetCode 101. 对称二叉树:两种解法(递归+迭代)详解
前端·算法·leetcode·链表·typescript
lyyl啊辉14 小时前
6. Vue开源三方UI组件库
vue.js
码云数智-大飞14 小时前
微前端架构落地实战:qiankun vs Module Federation 2026 深度对比与选型指南
前端·架构
IT枫斗者14 小时前
MyBatis批量插入性能优化:从5分钟到3秒的工程化实践
前端·vue.js·mysql·mongodb·性能优化·mybatis
前端 贾公子15 小时前
深入理解 Vue3 的 v-model 及自定义指令的实现原理(中)
前端·html
Never_Satisfied15 小时前
在HTML & CSS中,img标签固定宽度时,img和图片保持比例缩放
前端·css·html