当前位置: 首页 > news >正文

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

问题:vue获取模板excel文件时,不从接口获取,从本地文件获取,打包后出现文件不存在情况
在这里插入图片描述

解决办法:vue打包之后,excel放置在静态文件里
public里新建文件夹excel存放.xlsx文件
在这里插入图片描述

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

<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同级
在这里插入图片描述

http://www.dtcms.com/a/199317.html

相关文章:

  • 【云实验】Excel文件转存到RDS数据库
  • PDF 合并测试:性能与内容完整性
  • 确保高质量的音视频通话,如何最大化利用视频带宽
  • android双屏之副屏待机显示图片
  • std::ranges::views::as_const 和 std::ranges::as_const_view
  • 多卡跑ollama run deepseek-r1
  • Android Kotlin权限管理最佳实践
  • 看之前熟悉双亲委派加载机制,看之后了解双亲委派加载机制
  • 最大子树和--树形dp
  • Linux基础第四天
  • fastadmin 数据导出,设置excel行高和限制图片大小
  • 在Excel中使用函数公式时,常见错误对应不同的典型问题
  • Python学习笔记--使用Django操作mysql
  • 一键启动多个 Chrome 实例并自动清理的 Bash 脚本分享!
  • AWS EKS IP 耗尽:原因、解决方案和最佳实践
  • 【AWS入门】AWS身份验证和访问管理(IAM)
  • 【Windows系统】向量数据库Milvus安装教程
  • Win10 安装单机版ES(elasticsearch),整合IK分词器和安装Kibana
  • 鸿蒙PC操作系统:从Linux到自研微内核的蜕变
  • 手机内存不够,哪些文件可以删?
  • 小红书的视频怎么保存没有水印(方法分享)
  • linux——mysql故障排查与生产环境优化
  • Python打卡DAY30
  • MySQL函数触发:函数处理与触发器自动化应用
  • Node 服务监控及通过钉钉推送告警提醒
  • 实战教程:影刀RPA采集闲鱼商品并分享钉钉
  • Linux内核深入学习(4)——内核常见的数据结构2——红黑树
  • 深入解析Spring Boot与Kafka集成:构建高效消息驱动微服务
  • 常见排序算法整理(Java实现)
  • 开发 前端搭建npm v11.4.0 is known not to run on Node.js v14.18.1.