详解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一款3D字体带阴影效果的实现步骤
Mar 20 HTML / CSS
css3进行截取替代js的substring
Sep 02 HTML / CSS
css图标制作教程制作云图标
Jan 19 HTML / CSS
css3实例教程 一款纯css3实现的环形导航菜单
Oct 20 HTML / CSS
实例教程 纯CSS3打造非常炫的加载动画效果
Nov 05 HTML / CSS
CSS3过渡transition效果实例介绍
May 03 HTML / CSS
canvas实现有递增动画的环形进度条的实现方法
Jul 10 HTML / CSS
HTML5的结构和语义(3):语义性的块级元素
Oct 17 HTML / CSS
深入解析HTML5使用SVG图像时的viewBox属性用法
Sep 02 HTML / CSS
多视角3D逼真HTML5水波动画
Mar 03 HTML / CSS
HTML5+css3:3D旋转木马效果相册
Jan 03 HTML / CSS
HTML5 语义化标签(移动端必备)
Aug 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
隐藏X-Space个人空间下方版权方法隐藏X-Space个人空间标题隐藏X-Space个人空间管理版权方法
2007/02/22 PHP
PHP图片处理类 phpThumb参数用法介绍
2012/03/11 PHP
如何用PHP实现插入排序?
2013/04/10 PHP
php一个解析字符串排列数组的方法
2015/05/12 PHP
用JavaScript获取网页中的js、css、Flash等文件
2006/12/20 Javascript
jquery 简短右键菜单 多浏览器兼容
2010/01/01 Javascript
jquery.AutoComplete.js中文修正版(支持firefox)
2010/04/09 Javascript
javascript判断ie浏览器6/7版本加载不同样式表的实现代码
2011/12/26 Javascript
ajax上传时参数提交不更新等相关问题
2012/12/11 Javascript
JQuery中SetTimeOut传参问题探讨
2013/05/10 Javascript
JavaScript函数模式详解
2014/11/07 Javascript
jQuery对象的selector属性用法实例
2014/12/27 Javascript
根据配置文件加载js依赖模块
2014/12/29 Javascript
JS判断form内所有表单是否为空的简单实例
2016/09/09 Javascript
JS实现数组去重复值的方法示例
2017/02/18 Javascript
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
2017/08/09 jQuery
React Native 环境搭建的教程
2017/08/19 Javascript
详解基于Vue+Koa的pm2配置
2017/10/24 Javascript
webpack 模块热替换原理
2018/04/09 Javascript
详解vue使用vue-layer-mobile组件实现toast,loading效果
2018/08/31 Javascript
jQuery实现的别踩白块小游戏完整示例
2019/01/07 jQuery
深入理解JavaScript 箭头函数
2019/05/30 Javascript
VUE解决 v-html不能触发点击事件的问题
2019/10/28 Javascript
python抓取网页图片并放到指定文件夹
2014/04/24 Python
python进阶教程之循环相关函数range、enumerate、zip
2014/08/30 Python
Python和Sublime整合过程图示
2019/12/25 Python
什么是python类属性
2020/06/10 Python
python 实现汉诺塔游戏
2020/11/28 Python
深入了解canvas在移动端绘制模糊的问题解决
2019/04/30 HTML / CSS
中国首家奢侈品O2O网购平台:第五大道奢侈品网
2017/12/14 全球购物
城市观光通行证:The Sightseeing Pass
2018/04/28 全球购物
Kendra Scott官网:美国领先的时尚配饰品牌
2020/10/22 全球购物
学前班教师的自我鉴定
2013/12/05 职场文书
中层干部竞聘演讲稿
2014/05/15 职场文书
银行贷款委托书范本
2014/10/11 职场文书
民事诉讼代理词
2015/05/25 职场文书