详解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特效之动画:animation的应用
May 09 HTML / CSS
使用CSS3美化HTML表单的技巧演示
May 17 HTML / CSS
css3 矩阵的使用详解
Mar 20 HTML / CSS
CSS3 实现的缩略图悬停效果
Dec 09 HTML / CSS
CSS3中animation实现流光按钮效果
Dec 21 HTML / CSS
Html5剪切板功能的实现代码
Jun 29 HTML / CSS
HTML5教程之html 5 本地数据库(Web Sql Database)
Apr 03 HTML / CSS
html5桌面通知(Web Notifications)实例解析
Jul 07 HTML / CSS
canvas之自定义头像功能实现代码示例
Sep 29 HTML / CSS
详解canvas绘图时遇到的跨域问题
Mar 22 HTML / CSS
html5小程序飞入购物车(抛物线绘制运动轨迹点)
Oct 19 HTML / CSS
CSS三大特性继承性、层叠性和优先级详解
Jan 18 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
3种平台下安装php4经验点滴
2006/10/09 PHP
探讨Hessian在PHP中的使用分析
2013/06/13 PHP
PHP判断指定时间段的2个方法
2014/03/14 PHP
ThinkPHP模型详解
2015/07/27 PHP
Kibo 用于处理键盘事件的Javascript工具库
2011/10/28 Javascript
使用js简单实现了tree树菜单
2013/11/20 Javascript
JS高级调试技巧:捕获和分析 JavaScript Error详解
2014/03/16 Javascript
javascript学习笔记(七)Ajax和Http状态码
2014/10/08 Javascript
AngularJS实现textarea记录只能输入规定数量的字符并显示
2016/04/26 Javascript
微信小程序 弹幕功能简单实例
2017/02/14 Javascript
jQuery 表单序列化实例代码
2017/06/11 jQuery
JavaScript该如何学习 怎样轻松学习JavaScript
2017/06/12 Javascript
微信小程序之电影影评小程序制作代码
2017/08/03 Javascript
深入浅析Vue.js计算属性和侦听器
2018/05/05 Javascript
koa2实现登录注册功能的示例代码
2018/12/03 Javascript
Vue 中 template 有且只能一个 root的原因解析(源码分析)
2020/04/11 Javascript
Vue页面渲染中key的应用实例教程
2021/01/12 Vue.js
Python的函数的一些高阶特性
2015/04/27 Python
Pyhthon中使用compileall模块编译源文件为pyc文件
2015/04/28 Python
Django-Rest-Framework 权限管理源码浅析(小结)
2018/11/12 Python
Django时区详解
2019/07/24 Python
python循环嵌套的多种使用方法解析
2019/11/29 Python
Pytorch使用MNIST数据集实现CGAN和生成指定的数字方式
2020/01/10 Python
python通过matplotlib生成复合饼图
2020/02/06 Python
开发人员所需要知道的HTML5性能分析面面观
2012/07/05 HTML / CSS
html5视频自动横过来自适应页面且点击播放功能的实现
2020/06/03 HTML / CSS
史泰博(Staples)中国官方网站:办公用品一站式采购
2016/09/05 全球购物
英国最大的电子产品和家电零售企业:Currys PC World
2016/09/24 全球购物
你常见到的runtime exception
2016/09/05 面试题
卫校护理专业毕业生求职信
2013/11/26 职场文书
个人综合鉴定材料
2014/05/23 职场文书
爱护草坪标语
2014/06/24 职场文书
法语专业求职信
2014/07/20 职场文书
订货会邀请函
2015/01/31 职场文书
企业廉洁教育心得体会
2016/01/20 职场文书
《爬天都峰》教学反思
2016/02/23 职场文书