前端开发:a标签实现下载功能

应用背景
前端项目实现下载文件的功能,在后台没给我们撸接口的情况下,我们可以利用a标签实现下载功能,而且贼简单~

实现原理

通过a标签的download的属性,将需要下载的文件放在前端项目中,然后href属性访问文件路径(这里一定要是绝对路径,不然上线到服务器就变长脸啦)!!!!!!

代码示例

拿vue来说,我们的文件需放在静态资源的文件夹,知道你常用assets文件夹放图片啥的,卤煮告诉你,这样行不通!!!!
vue 2.× 的版本,把文件放static文件夹下,vue 3.×以上,放到public文件夹下。

看图说话
然后嘞,就下载呗~

// 以vue 2.×为例,baseURL就是你项目配置(根据环境配置的路径)
<a :href="`${baseURL}/static/file/模板.xlsx`" download="模板.xlsx">模板下载</a>

难点其实在路径的设置,稍有问题上线后就导致找不到路径,所以各位请慎重!!!!!!

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

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

Git下载安装教程

我下载Git的目的是为了借助Git把项目上传到Gitee 如何把项目上传到Gitee 文章目录 一、Git 的下载二、Git 安装三、Git 配置总结 提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案例可供参考 一、Git 的下载 第一个&#xff1a;Git下载地址 第二个&#xff1a;Git下…

baacloud苹果_baacloud官网下载

QZCloud app是一款非常不错的系统工具类手机软件&#xff0c;QZCloud软件能帮助大家快速的储存大量资料。超大内存等你来选择。感兴趣的小伙伴们快来下载QZCloud app免费版试试吧&#xff01; 软件介绍 QZCloud app是一款超级便捷功能强大的云网盘存储软件&#xff0c;可以极大…

A站视频下载方法

在网上看到有些人问A站的视频怎么下载&#xff0c;貌似网上也有一些软件号称能下载&#xff0c;测试了几个软件&#xff0c;返现都没办法下载&#xff0c;可能是因为A站升级了&#xff0c;导致这些软件下载不了&#xff0c;那么今天我们就来剖析下&#xff0c;A站的视频到底该怎…

知道浏览器下载的地方藏在哪里嘛?——看完你就知道

通常我们要通过浏览器来下载自己所需要的文件或者是软件&#xff0c;通过浏览器来下载的文件或者是软件我们直接去电脑硬盘找是非常麻烦的&#xff0c;现在来分享大家怎么样快速在电脑文件夹中找到自己下载的文件。 一、多御安全浏览器(c.hake.cc) 1、打开浏览器&#xff0c;…

你不知道的JavaScript(上中下三册) 电子版高清PDF -- 百度云下载

链接&#xff1a;https://pan.baidu.com/s/1pfviFDVDg7EpF35HQWEc6Q 密码&#xff1a;vaft

TS助手 v3.52 视频网站下载工具,网页视频下载神器

TS的全称则是Transport Stream&#xff0c;即传输流&#xff0c;DVD节目中的MPEG2格式&#xff0c;是MPEG2-PS&#xff0c;MPEG2-TS格式的特点就是要求从视频流的任一片段开始都是可以独立解码的&#xff0c;m3u8是一个TS切片列表文件&#xff0c;它记录视频的每个切片的时长与…

使用sci-hub下载文献

使用sci-hub下载文献 科研工具 文献下载 SeisPider 2017年08月12日 科研人员经常要看一些全文&#xff0c;但由于单位不可能花钱购买所有数据库的下载权限&#xff0c;因而会经常需要需要付费下载文章的情况。本文将介绍文献下载的好工具 sci-hub&#xff0c;可以下载到绝大多数…

Ubuntu下载QQ

Ubuntu下载QQ 下载qq方便传输文件。 Step1:首先进入腾讯官网下载软件包 1.1&#xff1a;在官网上选择合适的安装包 注&#xff1a;因为ubuntu属于linux系统&#xff0c;所以选择QQ Linux版。 1.2 选择合适的架构 不知道自己架构的&#xff0c;使用以下命令进行查看&#xf…

notepad++下载

目录 一、前言 二、 Notepad 是什么 三、在 GitHub 下载 1、GitHub的地址 2、搜索 notepad-plus-plus 3、进入 Release 界面 4、下载 三、在 csdn 中下载 四、结语 一、前言 前几天&#xff0c;有同事问我有没有 Notepad 的安装包&#xff0c;他在下载安装包时遇到了…

电影下载工具推荐

电影资源的文件通常都比较大&#xff0c;基本上都是1G起步&#xff0c;如果没有比较好的下载器加持&#xff0c;毫无疑问需要花费大量时间来下载&#xff0c;那么&#xff0c;大家知道电影下载工具中哪个比较好用吗&#xff1f;以下将为大家推荐几个电影下载软件。 一、电影下…

如何下载sci论文?

对于刚接触论文的学弟学妹&#xff0c;也包括当年的我&#xff0c;都不知道SCI、EI、ISTP到底是什么意思&#xff0c;下面&#xff0c;学姐就给大家详细地说一下。 SCI即《科学引文索引》(ScienceCitation Index)美国科学信息研究所创建的。SCI创刊于1961年&#xff0c;SCI&am…

华为手机使用笔记

下拉屏幕上方往下滑动打开通知栏&#xff0c;打开屏幕录制即可开始自动录屏。 录屏时左上角能看到亮点效果&#xff0c;再点击左上角录屏亮点即可结束录制并保存到本地图库。 华为P30怎么截长图&#xff1a; 参考&#xff1a;http://product.yesky.com/wenda/q-20646877.htm…

华为mate40e怎样截长图步骤分享

截图是我们在使用手机时十分常用的功能。但当我们想要截很长的图时该怎么办呢&#xff1f;为了帮助大家排忧解难。换换为大家带来了华为mate40e截长图的详细步骤。感兴趣的朋友就接着往下看吧&#xff01; 华为mate40e长图截屏步骤分享 1、进入设置>辅助功能>快捷启动及…

iphone13和华为mate40对比,哪个值得买?

首先就是外观设计上的差距&#xff0c;两者完全不是一个层次的产品。华为Mate40采用的是68的曲面屏&#xff0c;再加上后背独特的星环模组&#xff0c;逼格和手感瞬间提升。而iPhone13依然是直面刘海屏&#xff0c;虽然刘海相比iPhone12更小了&#xff0c;后置对角双摄也更有辨…

华为鸿蒙国人希望,中兴抢先发布系统,截胡华为鸿蒙系统,配置要求不高,国人:骄傲...

中兴抢先发布系统&#xff0c;截胡华为鸿蒙系统&#xff0c;配置要求不高&#xff0c;国人&#xff1a;骄傲 中国的产品&#xff0c;在以往的很长一段时间&#xff0c;都代表了质量的低下&#xff0c;因为国产的技术&#xff0c;还没有能够达到和国外一样的水平&#xff0c;同时…

电脑端如何截屏网页全部内容|网页截长图

电脑端如何截屏网页全部内容&#xff5c;网页截长图 这个功能比较小众&#xff0c;不过有需要的同学可以收藏一下&#xff5e; 这里以mac电脑的safri浏览器为例子&#xff0c;其他的浏览器类似&#xff1b; 右击选项&#xff0c;找到检查元素&#xff1b; 或者在浏览器找到【开…

华为nova7pro手机计算机在哪里,熟练使用华为nova7系列这几个功能 随时随地办公学习不用愁...

随着智能移动终端设备的飞速发展和人们生活工作节奏的加快&#xff0c;“移动办公”和“移动学习”越来越受大家欢迎。可以说&#xff0c;智能手机重构了大众的生活&#xff0c;除社交与娱乐外&#xff0c;手机还能实现文档编辑、PPT修改等功能&#xff0c;让随时随地办公和学习…

华为Android10版怎么截屏,◆华为P10怎么截屏 详细解读华为10截屏方法◆---已回复...

本帖最后由 毅青love静 于 2017-7-21 12:34 编辑 已经正式上市了&#xff0c;相信不少花粉已经上手了这款新机。那么在使用的过程中我们难免会遇到截屏操作&#xff0c;也许你会问华为P10怎么截屏呢&#xff1f;下面就为大家分享一下详细的华为P10截屏方法。 华为P10作为一款安…

华为汽车产业深度剖析

1. 前言&#xff1a;软件定义汽车背景 智能网联汽车快速发展&#xff0c;2025 年将超 3 千亿市场规模。随着智能汽车快速发展&#xff0c;智 能座舱和 ADAS 功能均不断升级&#xff0c;不论是传感器数量、芯片算力还是单车价值均实现快 速提升。智能座舱方面&#xff0c;我 国智…

鸿蒙os适合华为手机吗,如果华为手机搭载了鸿蒙OS,真的会顺利吗?

原标题&#xff1a;如果华为手机搭载了鸿蒙OS&#xff0c;真的会顺利吗&#xff1f; 系统的重要性 想让手机用户获得良好的体验&#xff0c;手机厂商需要下很大的功夫&#xff0c;甚至要在不同的方向进行发力&#xff0c;比如拍照能力、续航能力、硬件性能、功能细节以及系统优…