详解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轻松实现清新 Loading 效果的简单实例
Jun 06 HTML / CSS
详解css3自定义滚动条样式写法
Dec 25 HTML / CSS
利用 CSS3 实现的无缝轮播功能代码
Sep 25 HTML / CSS
html5使用Canvas绘图的使用方法
Nov 21 HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(一)
Jan 21 HTML / CSS
html5教程实现Photoshop渐变色效果
Dec 04 HTML / CSS
html5使用canvas实现跟随光标跳动的火焰效果
Jan 07 HTML / CSS
HTML5的新特性(1)
Mar 03 HTML / CSS
详解HTML5中rel属性的prefetch预加载功能使用
May 06 HTML / CSS
HTML5制作表格样式
Nov 15 HTML / CSS
CSS使用伪类控制边框长度的方法
Jan 18 HTML / CSS
CSS3实现360度循环旋转功能
Feb 12 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编程之高级技巧——利用Mysql函数
2006/10/09 PHP
一个简单的php实现的MySQL数据浏览器
2007/03/11 PHP
具有时效性的php加密解密函数代码
2013/06/19 PHP
PHP用户验证和标签推荐的简单使用
2016/10/31 PHP
CSS心形加载的动画源码的实现
2021/03/09 HTML / CSS
在VS2008中使用jQuery智能感应的方法
2010/12/30 Javascript
jQuery快速上手:写jQuery与直接写JS的区别详细解析
2013/08/26 Javascript
js实现简单的星级选择器提交效果适用于评论等
2013/10/18 Javascript
js函数在frame中的相互调用详解
2014/03/03 Javascript
jQuery如何将选中的对象转化为原始的DOM对象
2014/06/09 Javascript
Javascript基础教程之while语句
2015/01/18 Javascript
理解javascript正则表达式
2016/03/08 Javascript
使用jQuery调用XML实现无刷新即时聊天
2016/08/07 Javascript
vue基于Element构建自定义树的示例代码
2017/09/19 Javascript
详解如何制作并发布一个vue的组件的npm包
2018/11/10 Javascript
vue 解决兄弟组件、跨组件深层次的通信操作
2020/07/27 Javascript
在windows下快速搭建web.py开发框架方法
2016/04/22 Python
利用Python暴力破解zip文件口令的方法详解
2017/12/21 Python
TensorFlow 滑动平均的示例代码
2018/06/19 Python
tensorflow学习教程之文本分类详析
2018/08/07 Python
python使用循环打印所有三位数水仙花数的实例
2018/11/13 Python
python对于requests的封装方法详解
2019/01/03 Python
解决pycharm运行程序出现卡住scanning files to index索引的问题
2019/06/27 Python
利用Python实现Excel的文件间的数据匹配功能
2020/06/16 Python
Python使用pickle进行序列化和反序列化的示例代码
2020/09/22 Python
5款实用的python 工具推荐
2020/10/13 Python
html5实现微信打飞机游戏
2014/03/27 HTML / CSS
HTML5 实现图片上传预处理功能
2020/02/06 HTML / CSS
iPhoneX安全区域(Safe Area)底部小黑条在微信小程序和H5的屏幕适配
2020/04/08 HTML / CSS
适合各种场合的美食礼品:Harry & David
2016/08/03 全球购物
美国休闲服装品牌:J.Crew Factory
2017/03/04 全球购物
三只松鼠官方旗舰店:全网坚果销售第1
2017/11/25 全球购物
汽车专业人才自我鉴定范文
2013/12/29 职场文书
室内趣味活动方案
2014/08/24 职场文书
爱心捐款感谢信
2015/01/20 职场文书
2017大学生寒假社会实践心得体会
2016/01/14 职场文书