详解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 选择器 伪类选择器介绍
Jan 21 HTML / CSS
css3简单练习实现遨游浏览器logo的绘制
Jan 30 HTML / CSS
使用css3背景渐变中的透明度来设置不同颜色的背景渐变
Mar 31 HTML / CSS
纯html5+css3下拉导航菜单实现代码
Mar 18 HTML / CSS
HTML5 Canvas锯齿图代码实例
Apr 10 HTML / CSS
一些常用的HTML5模式(pattern) 总结
Jul 14 HTML / CSS
HTML5拖拽API经典实例详解
Apr 20 HTML / CSS
html5 外链式实现加减乘除的代码
Sep 04 HTML / CSS
Ratchet 模态框的实现
Aug 19 HTML / CSS
移动端HTML5开发神器之vconsole详解
Dec 15 HTML / CSS
CSS3通过var()和calc()函数实现动画特效
Mar 30 HTML / CSS
解决flex布局中子项目尺寸不受flex-shrink限制
May 11 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
全国FM电台频率大全 - 10 江苏省
2020/03/11 无线电
PHP 中 var_export、print_r、var_dump 调试中的区别
2018/06/19 PHP
奇妙的js
2007/09/24 Javascript
javascript小数四舍五入多种方法实现
2012/12/23 Javascript
jQuery遍历对象、数组、集合实例
2014/11/08 Javascript
javascript实现可全选、反选及删除表格的方法
2015/05/15 Javascript
每天一篇javascript学习小结(面向对象编程)
2015/11/20 Javascript
ES6中如何使用Set和WeakSet
2016/03/10 Javascript
JS实现六边形3D拖拽翻转效果的方法
2016/09/11 Javascript
微信小程序实战之登录页面制作(5)
2020/03/30 Javascript
ionic中的$ionicPlatform.ready事件中的通用设置
2017/06/11 Javascript
详解node Async/Await 更好的异步编程解决方案
2018/05/10 Javascript
angularJS1 url中携带参数的获取方法
2018/10/09 Javascript
详解Python的Django框架中Manager方法的使用
2015/07/21 Python
Python中str is not callable问题详解及解决办法
2017/02/10 Python
Python实现输出程序执行进度百分比的方法
2017/09/16 Python
教你利用Python玩转histogram直方图的五种方法
2018/07/30 Python
python3实现爬取淘宝美食代码分享
2018/09/23 Python
python使用 __init__初始化操作简单示例
2019/09/26 Python
如何安装并在pycharm使用selenium的方法
2020/04/30 Python
python操作微信自动发消息的实现(微信聊天机器人)
2020/07/14 Python
python wsgiref源码解析
2021/02/06 Python
关于 HTML5 的七个传说小结
2012/04/12 HTML / CSS
美国最大的香水连锁店官网:Perfumania
2016/08/15 全球购物
美国最大的网络男装服装品牌:Bonobos
2017/05/25 全球购物
Tommy Hilfiger美国官网:美国高端休闲领导品牌
2019/01/14 全球购物
大学生文员专业个人求职信范文
2014/01/05 职场文书
趣味游戏活动方案
2014/02/07 职场文书
安全保证书范文
2014/04/29 职场文书
优秀毕业生求职信
2014/06/05 职场文书
学党史心得体会
2014/09/05 职场文书
如何写辞职信
2015/05/13 职场文书
歌咏比赛口号大全
2015/12/25 职场文书
小学语文的各类谚语(70首)
2019/08/15 职场文书
java objectUtils 使用可能会出现的问题
2022/02/28 Java/Android
vue中控制mock在开发环境使用,在生产环境禁用方式
2022/04/06 Vue.js