HTML5 a标签的download属性

版权声明:本文为博主原创文章,未经博主允许不得转载。http://blog.csdn.net/leytton https://blog.csdn.net/Leytton/article/details/38545299

【转载请注明出处:http://blog.csdn.net/leytton/article/details/38545299

download属性能让我们指定浏览器下载时采用新的文件名称,也就是在客户端重命名下载文件。而不是链接上原始的文件名称。

添加download属性后,无论a标签的href属性链接到一个网页、图片、文本等,download属性都会强制触发下载操作,且自动命名文件为download属性。

如下代码

<!DOCTYPE html>
<html>
<body>
<p>点击 W3School 的 logo 来下载该图片:<p>
<a href="/i/w3school_logo_white.gif" download="w3logo.jpg">
    <img border="0" src="/i/w3school_logo_white.gif">
</a>
</body>
</html>

添加download属性后直接下载图片,而不是在浏览器中打开图片,且文件名自动修改成w3logo.jpg

点击链接测试:http://www.w3school.com.cn/tiy/t.asp?f=html_a_download (代码与本文稍有不同)


<a href="http://www.webhek.com/wordpress/wp-content/themes/webhek2/images/follow-us.jpg?8fe47c" download="我改名了.jpg">下载图片</a>


<a href="http://blog.csdn.net/leytton" download="Leytton.pdf">下载网页</a>


参考资料

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

HTML5里download属性                         http://www.webhek.com/download-attribute/

浏览器支持

IE Firefox Chrome Safari Opera
         

只有 Firefox 和 Chrome 支持 download 属性。


补充


CentOS下FireFox测试


猜你喜欢

转载自blog.csdn.net/Leytton/article/details/38545299