简述HTML5的下载属性
你是如何在网页上下载文件的呢?是不是想人们习惯中的那样,点击鼠标右键的“另存为”命令。原因有以下几点:
1、人们往往不清楚直接点击是打开文件还是下载,
2、直接打开文件会遇到几个问题:
1)打开大文件例如pdf时较慢;
2)大文件例如图像或者pdf的渲染容易造成浏览器崩溃;
3)打开文件有可能展示文件内容,例如bt种子,而其实这和我们的目的完全南辕北辙。
但是这种方式非常麻烦,很不直观,偏离了用户最便捷和最初的认知。我们可以想象一下向一位年纪较大的用户教育用这种方式来下载文件的场景,非常麻烦。而且很多用户不习惯和害怕使用鼠标右键。
现在HTML5增加了download下载属性来改变这件事。它可以这样使用:
<ahrefahref="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的出现为我们很多时候都提供了较为便捷的方式,在日后的发展中也将占据更为重要的位置。