详解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 完美实现圆角效果
Jul 13 HTML / CSS
animation和transition的区别
Oct 12 HTML / CSS
HTML5中视频音频的使用详解
Jul 07 HTML / CSS
HTML5 progress和meter控件_动力节点Java学院整理
Jul 06 HTML / CSS
Canvas 文本转粒子效果的实现代码
Feb 14 HTML / CSS
HTML5之HTML元素扩展(下)—增强的Form表单元素值得关注
Jan 31 HTML / CSS
HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等
May 08 HTML / CSS
简单的HTML5初步入门教程
Sep 29 HTML / CSS
HTML5新特性之用SVG绘制微信logo
Feb 03 HTML / CSS
HTML5 canvas基本绘图之图形变换
Jun 27 HTML / CSS
使用html2canvas.js实现页面截图并显示或上传的示例代码
Dec 18 HTML / CSS
深入理解margin塌陷和margin合并的解决方案
Jun 26 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学习的路线图
2013/07/10 PHP
单台服务器的PHP进程之间实现共享内存的方法
2014/06/13 PHP
9个实用的PHP代码片段分享
2015/01/22 PHP
PHP连接数据库实现注册页面的增删改查操作
2016/03/27 PHP
json 实例详细说明教程
2009/10/31 Javascript
jQuery学习笔记之jQuery选择器的使用
2010/12/22 Javascript
jquery 设置元素相对于另一个元素的top值(实例代码)
2013/11/06 Javascript
js控制table合并具体实现
2014/02/20 Javascript
Nodejs进程管理模块forever详解
2014/06/01 NodeJs
JS定义网页表单提交(submit)的方法
2015/03/20 Javascript
Javascript 计算字符串在localStorage中所占字节数
2015/10/21 Javascript
jQuery bt气泡实现悬停显示及移开隐藏功能的方法
2016/07/12 Javascript
3分钟快速搭建nodejs本地服务器方法运行测试html/js
2017/04/01 NodeJs
浅析Visual Studio Code断点调试Vue
2018/02/27 Javascript
jQuery实现获取当前鼠标位置并输出功能示例
2019/01/05 jQuery
浅析JavaScript异步代码优化
2019/03/18 Javascript
详解vue 2.6 中 slot 的新用法
2019/07/09 Javascript
ElementUI之Message功能拓展详解
2019/10/18 Javascript
Javascript中的this,bind和that使用实例
2019/12/05 Javascript
Nodejs封装类似express框架的路由实例详解
2020/01/05 NodeJs
JavaScript实现简易聊天对话框(加滚动条)
2020/02/10 Javascript
[47:39]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 LGD vs OPTIC
2018/03/31 DOTA
python将xml xsl文件生成html文件存储示例讲解
2013/12/03 Python
从零学Python之hello world
2014/05/21 Python
详解Python中的__new__、__init__、__call__三个特殊方法
2016/06/02 Python
Python+微信接口实现运维报警
2016/08/27 Python
利用python获取某年中每个月的第一天和最后一天
2016/12/15 Python
pyqt5之将textBrowser的内容写入txt文档的方法
2019/06/21 Python
HTML5 Canvas绘制文本及图片的基础教程
2016/03/14 HTML / CSS
巴西男士胡须和头发护理产品商店:Beard
2017/11/13 全球购物
AURALog面试题软件测试方面
2013/10/22 面试题
失业者真诚求职信范文
2013/12/25 职场文书
青奥会口号
2014/06/12 职场文书
ktv好的活动方案
2014/08/15 职场文书
北京英文导游词
2015/02/12 职场文书
总结Pyinstaller打包的高级用法
2021/06/28 Python