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

相关推荐
Sapphire~2 分钟前
【前端基础】04-XSS(跨站脚本攻击,Cross-Site Scripting)
前端·xss
奔跑的web.3 分钟前
Vue 3.6 重磅新特性:Vapor Mode 深度解析
前端·javascript·vue.js
MediaTea4 分钟前
Python OOP 设计思想 13:封装服务于演化
linux·服务器·前端·数据库·python
爱敲代码的婷婷婷.5 分钟前
patch-package 修改 node_modules流程以及注意点
前端·react native·前端框架·node.js
这是个栗子9 分钟前
【API封装参数传递】params 与 API 封装
开发语言·前端·javascript·data·params
Irene199115 分钟前
Vue3 <script setup> 中,async 通常不能省略
vue.js·async·await
凌栀茗17 分钟前
html第二天
前端·javascript·html
你脸上有BUG18 分钟前
CSS实现透明内层+渐变边框的优雅方案
前端·css·毛玻璃
Amumu1213826 分钟前
Redux介绍(一)
前端·javascript·react.js
麷飞花29 分钟前
TypeScript问题
前端·javascript·vscode·typescript·ts