详解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旋转透视
Apr 28 HTML / CSS
CSS3制作酷炫的三维相册效果
Jul 01 HTML / CSS
基于Html5实现的react拖拽排序组件示例
Aug 13 HTML / CSS
Html5内唤醒百度、高德APP的实现示例
May 20 HTML / CSS
有关HTML5页面在iPhoneX适配问题
Nov 13 HTML / CSS
浅谈HTML5新增和废弃的标签
Apr 28 HTML / CSS
data:image data url 文件转为Blob上传后端的方法
Jul 16 HTML / CSS
CSS实现fullpage.js全屏滚动效果的示例代码
Mar 24 HTML / CSS
html+css合并表格边框的示例代码
Mar 31 HTML / CSS
css背景和边框标签实例详解
May 21 HTML / CSS
css3 选择器
May 11 HTML / CSS
CSS使用Flex和Grid布局实现3D骰子
Aug 05 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/11/14 PHP
一组PHP加密解密函数分享
2014/06/05 PHP
php curl请求信息和返回信息设置代码实例
2015/04/27 PHP
PHP中Session可能会引起并发问题
2015/06/26 PHP
EasyUI的treegrid组件动态加载数据问题的解决办法
2011/12/11 Javascript
javascript 星级评分效果(手写)
2012/12/24 Javascript
jQuery滚动加载图片效果的实现
2013/03/06 Javascript
jquery遍历数组与筛选数组的方法
2013/11/05 Javascript
javascript如何创建表格(javascript绘制表格的二种方法)
2013/12/10 Javascript
jQuery scroll事件实现监控滚动条分页示例
2014/04/04 Javascript
jquery获取对象的方法足以应付常见的各种类型的对象
2014/05/14 Javascript
href下载文件根据id取url并下载
2014/05/28 Javascript
JS+CSS实现的简单折叠展开多级菜单效果
2015/09/12 Javascript
javascript中Date对象应用之简易日历实现
2016/07/12 Javascript
AngularJS 应用身份认证的技巧总结
2016/11/07 Javascript
vuejs2.0运用原生js实现简单的拖拽元素功能示例
2017/02/24 Javascript
ES6学习教程之对象的扩展详解
2017/05/02 Javascript
NodeJS设计模式总结【单例模式,适配器模式,装饰模式,观察者模式】
2017/09/06 NodeJs
jQuery实现图片简单轮播功能示例
2018/08/13 jQuery
解决vue.js 数据渲染成功仍报错的问题
2018/08/25 Javascript
利用Electron简单撸一个Markdown编辑器的方法
2019/06/10 Javascript
基于Vue全局组件与局部组件的区别说明
2020/08/11 Javascript
nodejs+express最简易的连接数据库的方法
2020/12/23 NodeJs
pytorch + visdom 处理简单分类问题的示例
2018/06/04 Python
python中不能连接超时的问题及解决方法
2018/06/10 Python
pytorch 加载(.pth)格式的模型实例
2019/08/20 Python
英国历史最悠久的DJ设备供应商:DJ Finance、DJ Warehouse、The DJ Shop
2019/09/04 全球购物
业务经理岗位职责
2013/11/11 职场文书
父亲的菜园教学反思
2014/02/13 职场文书
高校教师自荐信范文
2014/03/13 职场文书
美术社团活动总结
2014/06/27 职场文书
大学生找工作求职信
2014/07/09 职场文书
养成教育主题班会
2015/08/13 职场文书
电力安全学习心得体会
2016/01/18 职场文书
《乌鸦喝水》教学反思
2016/02/19 职场文书
python随机打印成绩排名表
2021/06/23 Python