HTML a 标签的 download 属性

作者: 会飞的鱼

全网最全的网络资源分享网站

手机扫码查看

标签:

HTMLdownload

特别声明:文章多为网络转载,资源使用一般不提供任何帮助,特殊资源除外,如有侵权请联系!

沫沫网络

有一个超链接,你将它链接到一张图片,比如说这样:

点我点我!

(代码如下)

<a href="https://www.baidu.com/img/bd_logo1.png" target="_blank">点我点我!</a>

直接点击这个超链接一般浏览器会直接在窗口中打开这张图片(我这里是加了插件,所以是在图片灯箱中显示的)

Image

那么,如果我想实现点击这个链接,直接弹出下载这张图片,该怎么做呢?

之前在做 MKOnlineMusicPlayer 的时候就遇到了类似的问题:为了实现音乐直接点击下载而不是在浏览器中打开,我的做法是用 PHP 在后台读取音乐文件,再加上 Content-Type: application/force-download 这个文件头实现弹出下载。这样做无疑加重了服务器的负担。

今天在“闲逛”之余无意间发现 a 标签居然有个 download 属性!

定义和用法

download 属性规定被下载的超链接目标。

在 a 标签中必须设置 href 属性。

该属性也可以设置一个值来规定下载文件的名称。所允许的值没有限制,浏览器将自动检测正确的文件扩展名并添加到文件 (.img, .pdf, .txt, .html, 等等)。

使用示例

<a href="https://www.baidu.com/img/bd_logo1.png" target="_blank" download="百度logo">点我点我!</a> 

这下点击链接就能实现直接弹出下载了!

Image

要是到这里结束就好了,然而……

只有 Firefox 和 Chrome 支持 download 属性。所以要想实现全浏览器兼容还是得使用在服务器进行“中转”的办法 

参考资料

HTML a download 属性 http://www.w3school.com.cn/tags/att_a_download.asp

本文最后更新于2017-9-26,已超过 1 年没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!
分享到:
打赏
未经允许不得转载:

作者: 会飞的鱼, 转载或复制请以 超链接形式 并注明出处 会飞的鱼
原文地址: 《HTML a 标签的 download 属性》 发布于2017-9-26

评论

切换注册

登录

忘记密码?

您也可以使用第三方帐号快捷登录

切换登录

注册

HTML a 标签的 download 属性

长按图片转发给朋友

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏