前端开发：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>

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

前端开发：a标签实现下载功能相关推荐

4.前端开发工具介绍以及下载使用
支持戳这里看视频学习 →→→ [上]前端开发工具介绍与下载...[下]写人生中第一个HTML 戳这里可看全系列内容 →→→ 戳我戳我戳我文章目录一.前言二.编辑器介绍 1.VSCode a.介绍 ...
关于纯前端excel上传、下载功能
工作项目中,表格的上传下载基本都是调取后端接口,把处理逻辑放在后端进行处理.那么纯前端js代码实现excel的上传下载是否可行?其实代码逻辑很简单,不过需要引用xlsx.js进行处理.下面是我自己写的 ...
前端开发练习——包含了计时功能的动画时钟
前言学了一段时间的前端,三大核心知识总算是磕磕绊绊的学完了,于是花了一个多小时做出来了这么一个相当于总结复习一样的动画时钟. 这个动画时钟实现的功能: 固定在页面中央显示. 可以在普通时钟模式和计时 ...
VSCode前端开发工具介绍、下载和安装（从头到尾）
一.为什么使用VSCode作为前端开发工具?: Visual Studio Code(简称VS Code/VSC),个人认为它主要有以前几个好处: ①开源-可免费使用(例如,WebStorm和Subl ...
WebStorm for Mac 2018.1.2 Web前端开发 IDE 破解版下载
WebStorm for Mac 是非常聪明的 JavaScript,CSS 和 HTML IDE,轻巧而强大的 IDE,非常适合复杂的客户端开发和使用 Node.js 的服务器端开发,是专业的 We ...
前端开发容器标签 0226
div块级标签功能: 块级元素,霸占一行用于页面结构 span内联级标签功能: 行内元素,可与其它行内标签共处一行用于页面布局表格标签 table家庭 table 表格的最外层容器 < ...
audio标签禁止下载功能
一个页面用于音乐试听,发现audio标签可以右键下载或者点击三个小点下载将audio设置为如下即可: <audio :style='{"width":"300px ...
前端开发_HTML5_标签部分(一)
一.如何快速学习标签? 1.记住标签对应的单词 2.该标签在页面产生的作用 3.为了更好的使用该标签,常用的属性有哪一些? 二.结构标签(doctype/html/head/m ...
前端开发容器标签span与div 0228
span 标签例子 div标签让容器的内部居中样式让整个容器相对于父一级居中例子总结

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

前端开发：a标签实现下载功能相关推荐

最新文章

热门文章