详解HTML5中download属性的应用


Posted in HTML / CSS onAugust 06, 2015

在传统的html中,某个文件的下载,是这样的:

XML/HTML Code复制内容到剪贴板
  1. <a href="=/files/abc1234564545.pdf">report</a>    

而在HTML 5浏览器中,可以支持download属性了,如下:

XML/HTML Code复制内容到剪贴板
  1. <a href="=/files/abc1234564545.pdf" download="abc">report</a>    

download属性的好处在于,在用户下载文件的时候,显示在用户浏览器
中的“另存”为的文件显示框中,显示的是这个downloader属性中显示的
东西了,比较友好

HTML5里,download属性为下载的文件取一个合适的名字,而不是使用原生的服务器文件名。

XML/HTML Code复制内容到剪贴板
  1. <!-- 将会下载 "test.txt"文件 -->  
  2. <a href="http://www.zjgsq.com/demo/1/some-realy-crazy-file-name-389247823879472398.txt" download="test">点击下载</a>  

然后当用户点击这个链接,这个download属性值就出现在下载对话框中,代替原来凌乱的文件名。在这个例子中,文件将被下载为test.txt。download属性同时开启了一个强制下载。

这个属性在存在文件交互的地方非常有用,在服务器端的文件名需要是及其独特的(上例中的文件名就很独特不是吗?),但是一堆乱码对用户来说没有任何作用,download属性定义文件名对用户更有意义。download属性只是增强性的,它不是非常酷,但是它很实用,而且非常易于添加。

HTML / CSS 相关文章推荐
css3制作彩色边线3d立体按钮的示例(css3按钮)
May 06 HTML / CSS
CSS3制作酷炫的三维相册效果
Jul 01 HTML / CSS
详解css3中 text-fill-color属性
Jul 08 HTML / CSS
css3进阶之less实现星空动画的示例代码
Sep 10 HTML / CSS
css3针对移动端卡顿问题的解决(动画性能优化)
Feb 14 HTML / CSS
浅谈HTML5新增及移除的元素
Jun 27 HTML / CSS
canvas需要在标签里直接定义宽高
Dec 17 HTML / CSS
HTML5 audio标签使用js进行播放控制实例
Apr 24 HTML / CSS
CSS3 制作的图片滚动效果
Apr 14 HTML / CSS
HTML+CSS实现导航条下拉菜单的示例代码
Aug 02 HTML / CSS
使用CSS连接数据库的方式
Feb 28 HTML / CSS
css3新特性的应用示例分析
Mar 16 HTML / CSS
详解HTML5中div和section以及article的区别
Jul 14 #HTML / CSS
一些常用的HTML5模式(pattern) 总结
Jul 14 #HTML / CSS
针对HTML5的Web Worker使用攻略
Jul 12 #HTML / CSS
极简的HTML5模版
Jul 09 #HTML / CSS
深入探究HTML5的History API
Jul 09 #HTML / CSS
HTML5中Localstorage的使用教程
Jul 09 #HTML / CSS
HTML5到底会有什么发展?HTML5的前景展望
Jul 07 #HTML / CSS
You might like
PHP Memcached + APC + 文件缓存封装实现代码
2010/03/11 PHP
php获取参数的几种方法总结
2014/02/18 PHP
PHP简单获取视频预览图的方法
2015/03/12 PHP
Yii 框架使用数据库(databases)的方法示例
2020/05/19 PHP
Javascript事件热键兼容ie|firefox
2010/12/30 Javascript
js弹出层包含flash 不能关闭隐藏的2种处理方法
2013/06/17 Javascript
基于jquery ui的alert,confirm方案(支持换肤)
2015/04/03 Javascript
JS+CSS实现的日本门户网站经典选项卡导航效果
2015/09/27 Javascript
封装获取dom元素的简单实例
2016/07/08 Javascript
总结在前端排序中遇到的问题
2016/07/19 Javascript
JS 实现计算器详解及实例代码(一)
2017/01/08 Javascript
详解Angular5路由传值方式及其相关问题
2018/04/28 Javascript
React注册倒计时功能的实现
2018/09/06 Javascript
php结合js实现多条件组合查询
2019/05/28 Javascript
JS设置自定义快捷键并实现图片上下左右移动
2019/10/17 Javascript
JS实现网站吸顶条
2020/01/08 Javascript
基于vue-cli3+typescript的tsx开发模板搭建过程分享
2020/02/28 Javascript
JS实现碰撞检测效果
2020/03/12 Javascript
基于JQuery和DWR实现异步数据传递
2020/10/16 jQuery
[02:04]2014DOTA2国际邀请赛 BBC小组赛第三天总结
2014/07/12 DOTA
python库lxml在linux和WIN系统下的安装
2018/06/24 Python
详解一种用django_cache实现分布式锁的方式
2019/09/01 Python
大家都说好用的Python命令行库click的使用
2019/11/07 Python
使用django自带的user做外键的方法
2020/11/30 Python
python如何修改文件时间属性
2021/02/05 Python
VICHY薇姿俄罗斯官方网上商店:法国护肤品牌,火山温泉水
2019/11/22 全球购物
Python面试题集
2012/03/08 面试题
PyQt 如何创建自定义QWidget
2021/03/24 Python
冬季安全检查方案
2014/05/23 职场文书
不尊敬老师的检讨书
2014/12/21 职场文书
师德承诺书
2015/01/20 职场文书
财务人员个人工作总结
2015/02/27 职场文书
2015年青年志愿者协会工作总结
2015/04/27 职场文书
2016高考寄语或鼓励的话语
2015/12/04 职场文书
2016年幼儿园教师师德承诺书
2016/03/25 职场文书
Java中try catch处理异常示例
2021/12/06 Java/Android