详解HTML5中download属性的应用

在传统的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属性只是增强性的,它不是非常酷,但是它很实用,而且非常易于添加。

时间: 2024-08-17 20:30:52

详解HTML5中download属性的应用的相关文章

详解JavaScript中的属性和特性_javascript技巧

JavaScript中属性和特性是完全不同的两个概念,这里我将根据自己所学,来深入理解JavaScript中的属性和特性. 主要内容如下: 理解JavaScript中对象的本质.对象与类的关系.对象与引用类型的关系 对象属性如何进行分类 属性中特性的理解  第一部分:理解JavaScript中对象的本质.对象与类的关系.对象与引用类型的关系 对象的本质:ECMA-262把对象定义为:无序属性的集合,其属性可以包含基本值.对象或者函数.即对象是一组没有特定顺序的值,对象的每个属性或方法都有一个名字

详解Android中visibility属性VISIBLE、INVISIBLE、GONE的区别_Android

在Android开发中,大部分控件都有visibility这个属性,其属性有3个分别为"visible "."invisible"."gone".主要用来设置控制控件的显示和隐藏.有些人可能会疑惑Invisible和gone是有什么区别的???那么,我们带着这个疑问看下面: 其在XML文件和Java代码中设置如下: 可见(visible) XML文件:android:visibility="visible" Java代码:vi

详解HTML5中ol标签的用法

定义和用法 <ol> 标签定义有序列表.   HTML 4.01 与 HTML 5 之间的差异 在 HTML 4.01 中,不赞成使用 "start" 属性,在 HTML 5 中是允许的. 在 HTML 4.01 中,不赞成使用 "compact" 和 "type" 属性,在 HTML 5 中,不再支持这两个属性. 提示和注释 提示:请使用 CSS 来定义列表的类型. 例子           XML/HTML Code复制内容到剪贴

举例详解HTML5中使用JSON格式提交表单

以JSON编码格式提交表单数据是HTML5对WEB发展进化的又一大贡献,以前我们的HTML表单数据是通过key-value方式传输的服务器端,这种形式的传输对数据组织缺乏管理,形式十分原始.而新出现的JSON格式提交表单数据方法,将表单里的所有数据转化的具有一定规范的JSON格式,然后传输的服务器端.服务器端接收到的数据是直接可以使用的合格JSON代码.如何声明以JSON格式提交表单 大家应该对如何用表单上传一个文件的写法很熟悉,它需要在HTML中form标记上添加 enctype="multi

详解HTML5中的template标签

一.HTML5 template元素初面   元素,基本上可以确定是2013年才出现的.干嘛用的呢,顾名思意,就是用来声明是"模板元素".   目前,我们在HTML中嵌入模板HTML,往往是类似这样的写法:   XML/HTML Code复制内容到剪贴板   <script type="text/template"> // ... </script>        实际上,并不存在type="text/template"这

举例详解CSS中position属性的使用

  position 这个属性决定了元素将如何定位.它的值大概有以下五种: 每个网页都可以看成是由一层一层页面堆叠起来的,如下图所示. position 设置为 relative 的时候,元素依然在普通流中,位置是正常位置,你可以通过 left right 等移动元素.会影响其他元素的位置. 而当一个元素的 position 值为 absolute 或 fixed 的时候,会发生三件事: 把该元素往 Z 轴方向移了一层,元素脱离了普通流,所以不再占据原来那层的空间,还会覆盖下层的元素. 该元素将

详解HTML5中div和section以及article的区别

      刚刚开始接触 HTML5 时,对它的标签很不适应,甚至一度有点反感.尤其是对 div.section.article 这几个标签,实在弄不清楚应该使用在什么场合下. div HTML Spec: The div element has no special meaning at all.          这个标签是我们见得最多.用得最多的一个标签.本身没有任何语义,用作布局以及样式化或脚本的钩子(hook). section HTML Spec: "The section elem

详解 javascript中offsetleft属性的用法_javascript技巧

此属性可以返回当前元素距离某个父辈元素左边缘的距离,当然这个父辈元素也是有讲究的. (1).如果父辈元素中有定位的元素,那么就返回距离当前元素最近的定位元素边缘的距离. (2).如果父辈元素中没有定位元素,那么就返回相对于body左边缘距离. 语法结构: obj.offsetleft 特别说明:此属性是只读的,不能够赋值. 代码实例: <!DOCTYPE html> <html> <head> <meta charset="utf-8">

详解Android中visibility属性VISIBLE、INVISIBLE、GONE的区别

在Android开发中,大部分控件都有visibility这个属性,其属性有3个分别为"visible "."invisible"."gone".主要用来设置控制控件的显示和隐藏.有些人可能会疑惑Invisible和gone是有什么区别的???那么,我们带着这个疑问看下面: 其在XML文件和Java代码中设置如下: 可见(visible) XML文件:android:visibility="visible" Java代码:vi