详解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 iphone玻璃透明气泡完美实现
Mar 20 HTML / CSS
CSS3 重置iphone浏览器按钮input,select等表单元素的默认样式
Oct 11 HTML / CSS
详解通过变换矩阵实现canvas的缩放功能
Jan 14 HTML / CSS
20佳惊艳的HTML5应用程序示例分享
May 03 HTML / CSS
html5 Canvas画图教程(5)—canvas里画曲线之arc方法
Jan 09 HTML / CSS
html5实现完美兼容各大浏览器的播放器
Dec 26 HTML / CSS
HTML5中meta属性的使用方法
Feb 29 HTML / CSS
HTML5 客户端数据库简易使用:IndexedDB
Dec 19 HTML / CSS
Html5嵌入钉钉的实现示例
Jun 04 HTML / CSS
HTML5 通过Vedio标签实现视频循环播放的示例代码
Aug 05 HTML / CSS
Html5之webcoekt播放JPEG图片流
Sep 22 HTML / CSS
CSS3实现的水平标题菜单
Apr 14 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
第四节--构造函数和析构函数
2006/11/16 PHP
PHP中生成UUID自定义函数分享
2015/06/10 PHP
PHP实现基于状态的责任链审批模式详解
2019/05/31 PHP
js对数字的格式化使用说明
2011/01/12 Javascript
一个级联菜单代码学习及removeClass与addClass的应用
2013/01/24 Javascript
JavaScript中的值类型转换介绍
2014/12/31 Javascript
JS实现定时自动关闭DIV层提示框的方法
2015/05/11 Javascript
JavaScript中的acos()方法使用详解
2015/06/14 Javascript
对JavaScript客户端应用编程的一些建议
2015/06/24 Javascript
JQuery遍历元素的后代和同胞实现方法
2016/09/18 Javascript
微信小程序 Tab页切换更新数据
2017/01/05 Javascript
Map.vue基于百度地图组件重构笔记分享
2017/04/17 Javascript
微信小程序之GET请求的实例详解
2017/09/29 Javascript
Postman模拟发送带token的请求方法
2018/03/31 Javascript
微信小程序实现两个页面传值的方法分析
2018/12/11 Javascript
vue+element 模态框表格形式的可编辑表单实现
2019/06/07 Javascript
基于vue 实现表单中password输入的显示与隐藏功能
2019/07/19 Javascript
基于vue实现探探滑动组件功能
2020/05/29 Javascript
[52:32]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第三场 11.18
2020/11/18 DOTA
Python可变参数函数用法实例
2015/07/07 Python
详解Python中的静态方法与类成员方法
2017/02/28 Python
Python第三方库h5py_读取mat文件并显示值的方法
2019/02/08 Python
Python调用百度根据经纬度查询地址的示例代码
2019/07/07 Python
django3.02模板中的超链接配置实例代码
2020/02/04 Python
matplotlib 对坐标的控制,加图例注释的操作
2020/04/17 Python
python 负数取模运算实例
2020/06/03 Python
css3 线性渐变和径向渐变示例附图
2014/04/08 HTML / CSS
html5中的一些标签学习(心得)
2016/10/18 HTML / CSS
香港百佳网上超级市场:PARKNSHOP.com
2020/06/10 全球购物
网络安全方面的面试题
2016/01/07 面试题
给朋友的道歉信
2014/01/09 职场文书
亲子读书活动方案
2014/02/22 职场文书
2014年财务部工作总结
2014/11/11 职场文书
中小企业员工手册范本
2015/05/14 职场文书
python如何在word中存储本地图片
2021/04/07 Python
MySQL基础快速入门知识总结(附思维导图)
2021/09/25 MySQL