详解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实现背景颜色渐变让图片不再是唯一的实现方式
Dec 18 HTML / CSS
纯CSS3大转盘抽奖示例代码(响应式、可配置)
Jan 13 HTML / CSS
CSS3贝塞尔曲线示例:创建链接悬停动画效果
Nov 19 HTML / CSS
HTML5拖放功能_动力节点Java学院整理
Jul 13 HTML / CSS
html5 浏览器支持 如何让所有的浏览器都支持HTML5标签样式
Dec 07 HTML / CSS
HTML5之SVG 2D入门11—用户交互性(动画)介绍及应用
Jan 30 HTML / CSS
Html5新特性用canvas标签画多条直线附效果截图
Jun 30 HTML / CSS
使用html5 canvas 画时钟代码实例分享
Nov 11 HTML / CSS
通过HTML5规范搞定i、em、b、strong元素的区别
Mar 04 HTML / CSS
html5视频媒体标签video的使用方法及完整参数说明详解
Sep 27 HTML / CSS
使用canvas生成含有微信头像的邀请海报没有微信头像问题
Oct 29 HTML / CSS
CSS中Single Div 绘图技巧的实现
Jun 18 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自定义函数之递归删除文件及目录
2010/08/08 PHP
PHP 基于Yii框架中使用smarty模板的方法详解
2013/06/13 PHP
php用正则判断是否为数字的方法
2016/03/25 PHP
PHP对象克隆clone用法示例
2016/09/28 PHP
利用PHPStorm如何开发Laravel应用详解
2017/08/30 PHP
PHP中cookie知识点学习
2018/05/06 PHP
JavaScript对象之间的转换 jQuery对象和原声DOM
2011/03/07 Javascript
jquery 操作iframe的几种方法总结
2013/12/13 Javascript
Angular2 http jsonp的实例详解
2017/08/31 Javascript
使用JS动态显示文本
2017/09/09 Javascript
对angularJs中controller控制器scope父子集作用域的实例讲解
2018/10/08 Javascript
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
2018/12/10 jQuery
JS栈stack类的实现与使用方法示例
2019/01/31 Javascript
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
2020/02/06 Javascript
prettier自动格式化去换行的实现代码
2020/08/25 Javascript
SpringBoot+Vue开发之Login校验规则、实现登录和重置事件
2020/10/19 Javascript
Python浅拷贝与深拷贝用法实例
2015/05/09 Python
python 实现在Excel末尾增加新行
2018/05/02 Python
Django学习教程之静态文件的调用详解
2018/05/08 Python
selenium3+python3环境搭建教程图解
2018/12/07 Python
python numpy存取文件的方式
2020/04/01 Python
Django框架安装方法图文详解
2019/11/04 Python
浅谈pandas.cut与pandas.qcut的使用方法及区别
2020/03/03 Python
利用Python脚本批量生成SQL语句
2020/03/04 Python
一组SQL面试题
2016/02/15 面试题
工艺工程师岗位职责
2014/03/04 职场文书
院领导写的就业推荐信
2014/03/09 职场文书
爱祖国爱家乡演讲稿
2014/09/02 职场文书
酒店管理失职检讨书
2014/09/16 职场文书
个人查摆剖析材料
2014/10/16 职场文书
企业介绍信范文
2015/01/30 职场文书
创业计划书之奶茶店开店方案范本!
2019/08/06 职场文书
浅谈JS的二进制家族
2021/05/09 Javascript
JavaScript canvas实现流星特效
2021/05/20 Javascript
docker compose 部署 golang 的 Athens 私有代理问题
2022/04/28 Servers
python数字图像处理实现图像的形变与缩放
2022/06/28 Python