WD1X.COM - 问答一下,轻松解决,电脑应用解决专家
主板显卡CPU内存显示器
硬盘维修显卡维修显示器维修
系统注册表系统命令DOSWin8
存储光存储键盘鼠标
内存维修打印机维修
WinXPVistaWin7linux
硬件综合机箱电源/散热器手机数码
主板维修CPU维修键鼠维修网页设计
办公教程ExcelWordPowerPointWPS
网络工具系统工具图像工具
PS教程数据库局域网服务器
PHP教程CSSjavascriptXML

a标签download属性:如何实现超链接具有下载文件的功能

更新时间:2021-04-03 16:05 作者:刘代码点击:

使用a标签href属性可以在html页面中现实页面跳转,或页面定位,但增加了download属性,就可以让超链接跳转功能失效,而变成具有文件下载的效果!

<a>标签download属性定义

download是HTML5中<a>标签新增的一个属性;

download属性可将<a>标签超链接文件资源直接实现点击下载;

download属性仅在<a>标签的 href 属性存在时使用;

如果download属性值为空,则下载时,默认使用原文件名;

download属性值不可跨域下载,只可下载同一域名下的资源;

<a>标签download属性语法:

Markup
<a href="文件资源URL" download="文件重命名">元素内容</a>

对于a标签内href属性后不能直接被下载的文件资源,比如图片,txt,js等文件,可以添加download属性实现点击文件资源后直接被下载的功能!

<a>标签download属性用法

如果我们不使用download属性,像下面的图片就会直接在浏览器中打开

Markup
<a href="images/logo.png"  download >logo图片</a>

但我们增加download属性后,点击超链接,就不会直接在浏览器中打开图片,而是直接下载该图片,代码如下:

Markup
<a href="images/logo.png"  download >下载logo图片</a>

这段代码中,download属性没有任何属性值,就会使用默认的文件名下载!

我们不仅可以直接下载文件,还可以使用download属性来给文件重命名:

Markup
<a href="images/logo.png"  download="2019.png" >下载logo图片</a>

上面这段代码,我们使用了download属性将图片的原文件名logo.png,重命名为2019.png;

温馨提示:

像MP4、MP3、ZIP等不能直接被浏览器打开的文件,不使用download属性,也会被直接执行下载;

像图片,html,txt,js,css等文件是可以直接被浏览器打开的,在a标签中不使用download属性,就不会被下载;

如果a标签href属性中的文件资源地址和当前页面不在同一个域名下,也就是跨域文件资源,那么,download属性就会失去作用,不能将文件资源变成可直接下载的文件!

顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
你可能感兴趣的内容