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

相关推荐
王六岁2 分钟前
🐍 前端开发 0 基础学 Python 入门指南:数字与字符串篇
前端·python·全栈
tiantian_cool21 分钟前
HarmonyOS 开发环境配置指南 - macOS 版
前端
写不来代码的草莓熊40 分钟前
vue前端面试题——记录一次面试当中遇到的题(10)
前端·vue.js·面试
web守墓人41 分钟前
【go语言】gopls工具与LSP协议全面解析
excel
tiantian_cool1 小时前
正确的 .gitignore 配置
前端·github
三小河1 小时前
封装 classNames:让 Tailwindcss 类名处理更优雅
前端·javascript
起这个名字1 小时前
ESLint 导入语句的分组排序
前端·javascript
踩着两条虫1 小时前
VTJ.PRO低代码快速入门指南
前端·低代码
Lazy_zheng1 小时前
一场“数据海啸”,让我重新认识了 requestAnimationFrame
前端·javascript·vue.js
crary,记忆1 小时前
MFE: React + Angular 混合demo
前端·javascript·学习·react.js·angular·angular.js