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

相关推荐
苹果酱056744 分钟前
Golang中的runtime.LockOSThread 和 runtime.UnlockOSThread
java·vue.js·spring boot·mysql·课程设计
会飞的鱼先生1 小时前
vue2、vue3项目打包生成txt文件-自动记录打包日期:git版本、当前分支、提交人姓名、提交日期、提交描述等信息 和 前端项目的版本号json文件
前端·vue.js·git·json
葡萄月令with蒲公英1 小时前
excel:时间戳格式与日期格式的互转
excel
!win !1 小时前
uni-app项目从0-1基础架构搭建全流程
前端·uni-app
南方以南_1 小时前
【云实验】Excel文件转存到RDS数据库
数据库·excel
c_zyer2 小时前
使用 nvm 管理 Node.js 和 npm 版本
前端·npm·node.js
布Coder2 小时前
前端 vue + element-ui 框架从 0 - 1 搭建
前端·javascript·vue.js
i_am_a_div_日积月累_2 小时前
Element Plus 取消el-form-item点击触发组件,改为原生表单控件
前端·vue.js·elementui
集成显卡2 小时前
网页 H5 微应用接入钉钉自动登录
前端·后端·钉钉
paintstar2 小时前
el-scrollbar 获取滚动条高度 并将滚动条保持在低端
前端·学习·vue·css3