HTML5下载属性简介

原创 2013年05月02日 17:56:30

        一直以来,人们习惯在网页上下载文件的方式是用右键的“另存为”命令。因为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新增标签和属性简介

  • 2011年11月21日 15:49
  • 31KB
  • 下载

HTML5自定义属性对象Dataset简介

====================================================== 注:本文源代码点此下载 =============================...

[H5]HTML5声明、标签、元素、属性、格式化简介

[H5]HTML5声明、标签、元素、属性、格式化简介 标签名 Gamin 你好 标题...

HTML5的Video标签的属性,方法和事件汇总及Video填充满父div的大小

标签的属性 src :视频的属性poster:视频封面,没有播放时显示的图片preload:预加载autoplay:自动播放loop:循环播放controls:浏览器自带的控制条width:视频宽...

HTML5画布Canvas文本填充、线段属性、裁剪、透明度与像素合并方式

CSS3中的很多都可以类比与我们canvas的一些属性  canvas中“画笔”环境对象的很多属性都可以类比CSS3中的属性  我们不仅仅可以绘制图形,还可以向画布中添加文字 文字填充 ...

HTML5属性,事件,标签

  • 2012年03月15日 12:51
  • 76KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML5下载属性简介
举报原因:
原因补充:

(最多只允许输入30个字)