vue下载本地xls模版静态文件

需求导入的下载模版不想放在服务器放在前端本地下载静态资源最简单的方式直接访问 public 文件夹下的文件

方法一:使用静态文件路径
将文件放在 public 文件夹中:
把你的文件从 src/assets 移动到 public 文件夹。例如:public/template.xls。
在 Vue 组件中使用相对路径:

<template><div><button @click="downloadTemplate">下载模板</button></div>
</template><script>
export default {methods: {downloadTemplate() {// 使用相对路径const fileUrl = '/template.xls';// 创建一个隐藏的a标签const link = document.createElement('a');link.href = fileUrl;link.download = 'template.xls';  // 设置下载文件名// 将a标签添加到DOM并触发点击事件document.body.appendChild(link);link.click();// 移除a标签document.body.removeChild(link);}}
}
</script><style scoped>
/* 你的样式代码 */
</style>

二、确保项目目录如下

my-vue-project/
├── public/
│   └── template.xls
├── src/
│   ├── assets/
│   ├── components/
│   └── App.vue
└── vue.config.js

三、验证
启动你的开发服务器,通常是 npm run serve或npm run dev。
直接在浏览器中访问 http://localhost:9000/template.xlsx 看是否能访问到文件。

通过以上步骤,应该能够确保静态文件能够正确访问和下载

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/35763.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【高考志愿】电气工程

目录 一、专业概述 二、专业特点 三、就业前景 四、选择学校 高考志愿选择电气工程是一个极具智慧和远见的决定&#xff0c;因为电气工程在当今社会中扮演着至关重要的角色。以下是对电气工程专业更为详细的解析&#xff1a; 一、专业概述 电气工程及其自动化专业&#xf…

一个项目学习Vue3---快速认识JSX

JSX&#xff08;JavaScript XML&#xff09;是一种用于在React框架中编写UI组件的语法扩展。它允许开发者将HTML标记直接嵌入到JavaScript代码中&#xff0c;使得在React组件中编写界面变得更加直观和高效。在编译过程中&#xff0c;JSX会被转换成普通的JavaScript对象&#xf…

工业液晶屏G065VN01 V2规格书简介

G065VN01 V2 背面实物图 2. 概述 G065VN01 V2 专为 VGA &#xff08;640 x RGB x 480&#xff09; 分辨率和 16.2M&#xff08;RGB 6 位 FRC&#xff09;或 262k 色&#xff08;RGB 6 位&#xff09;的工业显示应用而设计。它由TFT-LCD面板、驱动IC、控制和电源电路板以及包括…

css3实现水纹进度条

其实有一个mask-image属性 挺有意思&#xff0c;在元素上面实现遮罩层的效果&#xff0c;不过这玩意有些兼容性问题 需要处理&#xff0c;所以单纯可以通过渐变色的方式来实现 同时加上动画效果 .jianbian {width: 100%;height: 16px;background-color: #eee;display: flex;bor…

华三中小企业组网

一、组网需求 在中小园区中&#xff0c;S5130系列或S5130S系列以太网交换机通常部署在网络的接入层&#xff0c;S5560X系列或 S6520X系列以太网交换机通常部署在网络的核心&#xff0c;出口路由器一般选用MSR系列路由器。 核心交换机配置VRRP保证网络可靠性。园区网中不同的…

MySQL进阶——锁

目录 1全局锁—一致性数据备份 1.1全局锁介绍 1.2语法 1.3 一致性备份案例 1.4 全局锁特点 2表级锁 2.1表锁 2.1.1共享读锁 2.1.2独占写锁 2.2元数据锁 2.3元数据锁 MySQL中的锁&#xff0c;按照锁的粒度分&#xff0c;分为以下三类&#xff1a; &#xff08;1&…

GitLab配置免密登录之后仍然需要Git登录的解决办法

GitLab配置免密登录之后仍然需要Git登录的解决办法 因为实习工作需要&#xff0c;要在本地拉取gitlab上的代码&#xff0c;设置了密钥之后连接的时候还需要登录的token&#xff0c;摸索之后有了下面的解决办法。 方法一&#xff1a; 根据报错的提示&#xff0c;去网站上设置个人…

动手学自然语言处理:解读大模型背后的核心技术

自从 ChatGPT 横空出世以来&#xff0c;自然语言处理&#xff08;Natural Language Processing&#xff0c;NLP&#xff09; 研究领域就出现了一种消极的声音&#xff0c;认为大模型技术导致 NLP “死了”。在某乎上就有一条热门问答&#xff0c;大家热烈地讨论了这个问题。 有…

【STM32】看门狗

1.看门狗简介 看门狗起始就是一个定时器&#xff0c;从功能上说它可以让微控制器在程序发生意外&#xff08;程序进入死循环或跑飞&#xff09;的时候&#xff0c;能重新恢复到系统刚上电状态&#xff0c;以保障系统出问题的时候可以重启一次。说的简单一点&#xff0c;看门狗…

用英文介绍孟买:Mumbai India‘s Transforming MEGACITY

Mumbai: India’s Transforming MEGACITY Link: https://www.youtube.com/watch?vtWD_-Rzrn8o Summary First Paragraph: Mumbai, India’s financial and entertainment capital, is undergoing a major transformation. With its contiguous urban population nearing 25…

神经网络实现AND门:逻辑运算的智能化飞跃

神经网络实现AND门&#xff1a;逻辑运算的智能化飞跃 在人工智能的早期探索中&#xff0c;人们就梦想着用机器模拟人脑的逻辑思考能力。AND逻辑函数作为最基本的逻辑运算之一&#xff0c;其在神经网络中的实现&#xff0c;标志着我们向智能化迈出了坚实的一步。本文将详细解释…

web图片怎么导入ps?这个方法给你轻松解决!

随着WebP格式图片因其体积小、加载快的优势在网站中日益普及&#xff0c;对于图片编辑者来说&#xff0c;能够直接在Photoshop中打开和编辑WebP文件变得尤为重要。 WebPShop插件应运而生&#xff0c;它是一个专为Photoshop设计的模块&#xff0c;支持打开和保存WebP图像&#…

ATFX汇市:澳大利亚5月CPI大增0.4百分点,降息预期显著降温

ATFX汇市&#xff1a;据澳大利亚统计局数据&#xff0c;澳大利亚5月加权CPI年率为4%&#xff0c;高于前值3.6%&#xff0c;高于预期3.8%&#xff0c;显示出澳大利亚通胀率颇具韧性。5月份数据公布之前&#xff0c;月度CPI年率平均波幅不足0.1个百分点&#xff0c;呈现出横盘震荡…

《数字图像处理》实验报告六

一、实验任务与要求 比较采用不同的色彩空间对彩色图像处理的效果&#xff0c;处理包括&#xff1a; a&#xff09;直方图均衡化 b&#xff09;图像增强 二、实验报告 &#xff08;一&#xff09;RGB色彩空间的直方图均衡化 / 锐化处理 1、matlab 实现代码&#xff1a; %…

C语言 用getchar函数读入两个字符给c1和c2,然后分别用putchar函数和printf函数输出

用getchar函数读入两个字符给c1和c2&#xff0c;然后分别用putchar函数和printf函数输出这两个字符并且解答以下三个问题&#xff1a; 1.变量c1和c2应定义为字符型&#xff0c;整形&#xff0c;还是二者皆可&#xff1f; 2.要求输出c1和C2的ASCII码&#xff0c;应如何处理&am…

推荐系统(LLM去偏?) | (WSDM24)预训练推荐系统:因果去偏视角

::: 大家好&#xff01;今天我分享的文章是来自威斯康星大学麦迪逊分校和亚马逊AWS AI实验室的最新工作&#xff0c;文章所属领域是推荐系统和因果推理&#xff0c;作者针对跨域推荐中的偏差问题提出了一种基于因果去偏的预训练推荐系统框架PreRec。 ::: 原文&#xff1a;Pre-t…

【MySQL进阶之路 | 小结篇】MySQL键约束KEY与索引INDEX

1. 键约束 关键字key 比如UNIQUE KEY就是一个唯一性约束&#xff0c;用于确保表中的某一列或多列的组合具有唯一性&#xff0c;不允许有重复值.当定义一个唯一性约束的时候&#xff0c;会自动创建一个唯一性索引来支持这一约束&#xff0c;这意味着它同时也起到了索引的作用.…

mobaXterm上传文件进度一直为0%

在这里修改了senssion、重启都没有用 最后发现是文件存放的路径中不能有中文&#xff0c;改了之后就成功上传了

开展FMEA培训时需要做好哪些准备?

FMEA&#xff08;失效模式与影响分析&#xff09;作为一种预防性的质量工具&#xff0c;正逐渐成为当代企业提升产品竞争力的关键。然而&#xff0c;很多企业在开展FMEA时&#xff0c;却常常因为准备工作不足而事倍功半。那么&#xff0c;开展FMEA培训时需要做好哪些准备呢&…

Jenkins流水线发布,一篇就解决你的所有疑惑

这次搭建的项目比较常规,前端是react写的,后端是springboot,并且由于是全栈开发,所以是在同一个项目中。接下来我演示下怎么用jenkins进行自动化发布。 1.jenkins必装插件 这里用到的是jenkinsFile主要是基于Groovy这个沙盒,有些前置插件。这里使用maven进行打包,所以需…