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下载属性简介

一直以来,人们习惯在网页上下载文件的方式是用右键的“另存为”命令。因为1、人们往往不清楚直接点击是打开文件还是下载,2、直接打开文件会遇到几个问题:1)打开大文件例如pdf时较慢;2)大文件例如图像或...
  • hfahe
  • hfahe
  • 2013年05月02日 17:56
  • 9705

html标签属性大全(完美版).doc

  • 2015年08月10日 21:59
  • 79KB
  • 下载

HTML5秘籍---第一章(HTML5简介)

前端菜鸟小COPY《HTML5秘籍》中的一些精髓
  • u010313768
  • u010313768
  • 2015年09月30日 12:04
  • 241

HTML5快速入门(一)—— HTML简介

前言:1.HTML5的发展非常迅速,可以说已经是前端开发人员的标配,在电商类型的APP中更是运用广泛,这个系列的文章是本人自己整理,尽量将开发中不常用到的剔除,将经常使用的拿出来,使需要的朋友能够真正...
  • yeshaojian
  • yeshaojian
  • 2016年06月08日 21:50
  • 10106

HTML5 a标签的download属性

download属性能让我们指定浏览器下载时采用新的文件名称,也就是在客户端重命名下载文件。而不是链接上原始的文件名称。 添加download属性后,无论a标签的href属性链接到一个网页、图片、文本...
  • Leytton
  • Leytton
  • 2014年08月13日 23:23
  • 12147

html 中 a 链接的 download 属性的神奇使用

html 中 a 链接的 download 属性的神奇使用一般来说,我们在页面中提供下载的时候,都需要去配置一些服务端的东西,比如指定 zip 文件就通知浏览器下载这个文件。但是,比如 .jpg 这样...
  • FungLeo
  • FungLeo
  • 2017年08月23日 15:16
  • 1963

HTML5技术简介

1. 介绍 HTML是超文本标记语言的英文缩写,这是一种标记语言,不需要进行编译,直接由浏览器执行。HTML文件是一个文本文件,包含了一些HTML元素、标签等。目前HTML语言最新版本为4,W3C发...
  • aa_moon
  • aa_moon
  • 2016年12月02日 15:49
  • 1558

html5下载download属性

html5下载标签测试download属性可以直接实现图片,视频,压缩文件下载功能,但是浏览器对文件重命名支持度并不一致(所用浏览器皆为目前最新版本)1.火狐浏览器,支持重命名。 注意命名时...
  • sinat_35861664
  • sinat_35861664
  • 2016年11月12日 21:41
  • 237

HTML无刷新下载文件方法总汇

首先要保证有一个后台可以下载文件的方法,这里只总结前端解决方法,所以不对后台做分析,假设现在有一个下载文件的方法/project/download.action。如果不想通过后台直接下载可以看我的另一...
  • xiaoming_dai
  • xiaoming_dai
  • 2015年06月08日 19:49
  • 276

html对象属性大全

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

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