HTML5下载属性简介

一直以来，人们习惯在网页上下载文件的方式是用右键的“另存为”命令。因为1、人们往往不清楚直接点击是打开文件还是下载，2、直接打开文件会遇到几个问题：1）打开大文件例如pdf时较慢；2）大文件例如图像或者pdf的渲染容易造成浏览器崩溃；3）打开文件有可能展示文件内容，例如bt种子，而其实这和我们的目的完全南辕北辙。

在网页中打开种子文件和我们的目的完全相反

但是这种方式非常麻烦，很不直观，偏离了用户最便捷和最初的认知。我们可以想象一下向一位年纪较大的用户教育用这种方式来下载文件的场景，非常麻烦。而且很多用户不习惯和害怕使用鼠标右键。

现在HTML5增加了download下载属性来改变这件事。它可以这样使用：

<ahref="hugemothereffinpdf.pdf"download>Downloadfile</a>

通过这个属性浏览器会让此文件通过下载方式处理。也可以给属性一个值做为下载文件名，形如：

download="filename"

目前此属性已经在Chrome 14+和Firefox 20+以上浏览器得到支持，你可以采用如下的方式测试浏览器是否支持下载属性：

if('download'in document.createElement('a')) //supported

要特别说明的是，在Firefox中必须要为文件指定文件类型，而Chrome则不需要。例如Firefox必须要设定download="filename.txt"。

IE9之前版本的IE浏览器可以采用条件注释作为降级的方式处理。

<!--[if IE]><p>Rightclick and save as.</p><![endif]-->

当然，我们也可以通过在服务器端配置的方式来强迫文件下载，但是这种方式比起网页端HTML5的解决方案更复杂，也没有这么灵活。

HTML5下载属性简介相关推荐

深入了解：HTML5下载属性
创建下载链接通常很容易. 我们需要做的就是使用锚标记<a> ,并添加指向该文件的参考URL . 但是某些文件类型带来了技术问题–当用户单击相关链接时,PDF,图像和文本文件将在浏览器中打开 ...
HTML5新增属性学习笔记
1.form属性表单内的从属元素,可以写在表单外部.可以通过指定元素的form属性来声明元素所属表单.form的属性值为表单的id. 1 <form id="testForm&quo ...
HTML5: 全局属性
出处:http://www.cnblogs.com/starof/p/4593741.html 全局属性:对于任何一个标签都是可以使用的属性. 一.data-* 在html5之前需要在html标签上添 ...
HTML5 学习总结（二）——HTML5新增属性与表单元素
一.HTML5新增属性 1.1.contextmenu contextmenu的作用是指定右键菜单. <!DOCTYPE html> <html><head>< ...
html作品简介代码,HTML5的标签的代码的简单介绍 HTML5标签的简介
HTML5的标签的代码的简单介绍 HTML5标签的简介发布时间:2012-05-28 14:43:34 作者:佚名我要评论本文主要介绍了HTML5的标签.不同于以前的标签.更简单.更方便 ...
HTML5 自动聚焦属性
原文 : HTML5 autofocus Attribut 原文发布时间: 2012年08月27日翻译时间: 2013年8月6日 HTML5 推出了一大堆精彩的东西给我们. 过去我们要用JavaSc ...
HTML5标签属性全在这里了
一.HTML5文档结构 HTML5文档的基本结构 <!DOCTYPE html> <html><head><meta charset="utf-8& ...
audio和vide多媒体新属性简介:
前言:HTML5 中 Audio and Video的使用方法比较简单,但就是比较复杂,方法属性多.如果不常用的几乎难以记住,甚至有些人难以区分不同属性和方法的作用,更别说应用了.以下对 Audio ...
iOS之CAGradientLayer属性简介和使用
1.CAGradientLayer简介 CAGradientLayer用于制作背景图层的颜色渐变,也就是颜色梯度!相关属性简介: #import <QuartzCore/CALayer.h> ...
Android Activity动画属性简介
Android Activity动画属性简介在Android当中设置activity的动画需要复写 android:windowAnimationStyle这个属性我们自定义一个动画样式来继承 ...

HTML5下载属性简介

HTML5下载属性简介相关推荐

最新文章

热门文章