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

相关推荐
ShenJLLL2 小时前
vue部分知识点.
前端·javascript·vue.js·前端框架
恋猫de小郭3 小时前
你是不是觉得 R8 很讨厌,但 Android 为什么选择 R8 ?也许你对 R8 还不够了解
android·前端·flutter
PineappleCoder3 小时前
告别“幻影坦克”:手把手教你丝滑规避布局抖动,让页面渲染快如闪电!
前端·性能优化
武帝为此4 小时前
【Shell变量替换与测试】
前端·chrome
CappuccinoRose4 小时前
CSS 语法学习文档(十九)
前端·css·属性·flex·grid·学习资源·格式化上下文
雷电法拉珑5 小时前
财务数据批量采集
linux·前端·python
We་ct5 小时前
LeetCode 105. 从前序与中序遍历序列构造二叉树:题解与思路解析
前端·算法·leetcode·链表·typescript
前端 贾公子6 小时前
深入理解 Vue3 的 v-model 及自定义指令的实现原理(下)
前端·html
Roc.Chang6 小时前
Vite 启动报错:listen EACCES: permission denied 0.0.0.0:80 解决方案
linux·前端·vue·vite