详解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媒体查询(Media Queries)介绍
Sep 12 HTML / CSS
纯css3实现的动画按钮的实例教程
Nov 17 HTML / CSS
纯css3实现的竖形无限级导航
Dec 10 HTML / CSS
CSS3制作彩色进度条样式的代码示例分享
Jun 23 HTML / CSS
CSS3改变浏览器滚动条样式
Jan 04 HTML / CSS
CSS3只让背景图片旋转180度的实现示例
Mar 09 HTML / CSS
HTML5拖放功能_动力节点Java学院整理
Jul 13 HTML / CSS
localStorage 设置过期时间的方法实现
Dec 21 HTML / CSS
HTML5边玩边学(3)像素和颜色
Sep 21 HTML / CSS
html5中valid、invalid、required的定义
Feb 21 HTML / CSS
用HTML5制作数字时钟的教程
May 11 HTML / CSS
HTML5 video 上传预览图片视频如何设置、预览视频某秒的海报帧
Aug 28 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 基于Yii框架中使用smarty模板的方法详解
2013/06/13 PHP
PHP中Array相关函数简介
2016/07/03 PHP
Yii2汉字转拼音类的实例代码
2017/04/18 PHP
Laravel中错误与异常处理的用法示例
2018/09/16 PHP
php 使用 __call实现重载功能示例
2019/11/18 PHP
基于JQuery的模拟苹果桌面Dock效果(稳定版)
2012/10/15 Javascript
jquery dialog open后,服务器端控件失效的快速解决方法
2013/12/19 Javascript
jquery实现点击消失的代码
2014/03/03 Javascript
Nodejs中自定义事件实例
2014/06/20 NodeJs
基于jquery实现等比缩放图片
2014/12/03 Javascript
js与jquery实时监听输入框值的oninput与onpropertychange方法
2015/02/05 Javascript
JS去除iframe滚动条的方法
2015/04/01 Javascript
JavaSacript中charCodeAt()方法的使用详解
2015/06/05 Javascript
Angularjs 自定义服务的三种方式(推荐)
2016/08/02 Javascript
Angular.Js中过滤器filter与自定义过滤器filter实例详解
2017/05/08 Javascript
JS中比较两个Object数组是否相等方法实例
2019/11/11 Javascript
python3生成随机数实例
2014/10/20 Python
Python中查看文件名和文件路径
2017/03/31 Python
Python实现的批量修改文件后缀名操作示例
2018/12/07 Python
使用python接入微信聊天机器人
2020/03/31 Python
Django中间件拦截未登录url实例详解
2019/09/03 Python
python分别打包出32位和64位应用程序
2020/02/18 Python
Python3开发环境搭建详细教程
2020/06/18 Python
Crocs卡骆驰洞洞鞋日本官方网站:Crocs日本
2016/08/25 全球购物
捷克家具销售网站:SCONTO Nábytek
2020/01/02 全球购物
建筑学推荐信
2013/11/03 职场文书
历史学专业推荐信
2013/11/06 职场文书
数控专业推荐信范文
2013/12/02 职场文书
室内设计专业个人的自我评价
2013/12/18 职场文书
《海伦?凯勒》教学反思
2014/04/17 职场文书
寒暑假实习证明书模板
2014/11/29 职场文书
某药房的新员工入职告知书!
2019/07/15 职场文书
Ajax实现局部刷新的方法实例
2021/03/31 Javascript
SQLServer2019 数据库的基本使用之图形化界面操作的实现
2021/04/08 SQL Server
python代码实现备忘录案例讲解
2021/07/26 Python
原生JS实现分页
2022/04/19 Javascript