html a download 无效,HTML a 标签的 download 属性

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

(代码如下)

点我点我!

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

f99ffd1f4533e7a0332c52bb2eb7deef.png

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

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

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

定义和用法

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

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

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

使用示例

点我点我!

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

b18cd73f598e8668b76e2da75fee6294.png

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

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

参考资料

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值