蒋宇捷的专栏

关注互联网、移动互联网的应用和趋势

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教程和手册

2011年10月11日 473KB 下载

HTML5 入门

2013年01月07日 1.39MB 下载

html5教程+速查手册+参考手册

2012年04月28日 592KB 下载

HTML5学校网站模板

2017年11月20日 2.02MB 下载

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭