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的解决方案更复杂,也没有这么灵活。

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 4
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值