详解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 相关文章推荐
使用HTML5和CSS3表单验证功能
May 05 HTML / CSS
CSS3地图动态实例代码(圆圈向外扩散)
Jun 15 HTML / CSS
使用JS+CSS3技术:让你的名字动起来
Apr 27 HTML / CSS
带有css3动画效果的兼容多浏览器简单导航条示例
Jan 26 HTML / CSS
css3发光搜索表单分享
Apr 11 HTML / CSS
详解FireFox下Canvas使用图像合成绘制SVG的Bug
Jul 10 HTML / CSS
html5的新增的标签和废除的标签简要概述
Feb 20 HTML / CSS
纯html5+css3下拉导航菜单实现代码
Mar 18 HTML / CSS
html5通过canvas实现刮刮卡效果示例分享
Jan 27 HTML / CSS
让IE9以下版本的浏览器兼容HTML5的方法
Mar 12 HTML / CSS
HTML5 拖放功能实现代码
Jul 14 HTML / CSS
解决canvas转base64/jpeg时透明区域变成黑色背景的方法
Oct 23 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
PHP5.2中date()函数显示时间与北京时间相差8小时的解决办法
2009/05/28 PHP
一步一步学习PHP(1) php开发环境配置
2010/02/15 PHP
php常用文件操作函数汇总
2014/11/22 PHP
使用Thinkphp框架开发移动端接口
2015/08/05 PHP
PHP数组操作简单案例分析
2016/10/15 PHP
Yii输入正确验证码却验证失败的解决方法
2017/06/06 PHP
网页中CDATA标记的说明
2010/09/12 Javascript
javascript题目,重写函数让其无限相加
2012/02/15 Javascript
通过JS动态创建一个html DOM元素并显示
2014/10/15 Javascript
iscroll碰到Select无法选择下拉刷新的解决办法
2016/05/21 Javascript
JSON对象 详解及实例代码
2016/10/18 Javascript
Vue 页面切换效果之 BubbleTransition(推荐)
2018/04/08 Javascript
Vue指令指令大全
2019/02/09 Javascript
JS使用new操作符创建对象的方法分析
2019/05/30 Javascript
微信小程序学习总结(二)样式、属性、模板操作分析
2020/06/04 Javascript
八种Vue组件间通讯方式合集(推荐)
2020/08/18 Javascript
[05:53]完美世界携手游戏风云打造 卡尔工作室观战系统篇
2013/04/22 DOTA
[42:52]IG vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python中http请求方法库汇总
2016/01/06 Python
pycharm在调试python时执行其他语句的方法
2018/11/29 Python
numpy.linspace函数具体使用详解
2019/05/27 Python
Python Web静态服务器非堵塞模式实现方法示例
2019/11/21 Python
从多个tfrecord文件中无限读取文件的例子
2020/02/17 Python
python编程进阶之类和对象用法实例分析
2020/02/21 Python
Python开发企业微信机器人每天定时发消息实例
2020/03/17 Python
Python中zipfile压缩文件模块的基本使用教程
2020/06/14 Python
基于matplotlib中ion()和ioff()的使用详解
2020/06/16 Python
python 用Matplotlib作图中有多个Y轴
2020/11/28 Python
Python实现Appium端口检测与释放的实现
2020/12/31 Python
德国baby-markt婴儿用品瑞士网站:baby-markt.ch
2017/06/09 全球购物
奥地利体育网上商店:Gigasport
2019/10/09 全球购物
房地产销售计划书
2014/01/10 职场文书
店面出租协议书范本
2014/11/28 职场文书
消费者理赔投诉书
2015/07/02 职场文书
公证书
2019/04/17 职场文书
Canvas绘制像素风图片的示例代码
2021/09/25 HTML / CSS