今天无意中了解到html5的新属性 download属性,在这记录一下。
一、什么是download属性?怎么应用?
我们上网,经常会遇到下载文件、图片等功能,那这个下载的功能是怎么实现的呢?基本上目前的实现方式都是后台语言实现的,例如php这样的后台语言,通过告知浏览器header信息,来实现下载。
header('Content-type:image/jpeg');
header("Content-Disposition:attachment;filename='download.jpg'");
但是随着这种前后端分离的趋势的发展,前端也可以实现下载功能了,就是利用download属性。
下面我们用一个例子来说明:我们希望点击“下载” 链接下载图片而不是浏览,直接给a标签增加一个download属性就可以了:
<a href="picture.jpg" download>下载</a>
,这样在chrome浏览器中(firefox浏览器因为跨域限制无效)就可以下载图片了,我们还可以为下载图片指定文件名称:
<a href="picture.jpg" download="logo.jpg">下载</a>
二、download 的浏览器兼容性和跨域策略
在这就Chrome浏览器和FireFox浏览器做个对比:
如果需要下载的资源是跨域的,包括跨子域,在Chrome浏览器下,使用download属性是可以下载的,但是,并不能重置下载的文件的命名;而FireFox浏览器下,则download属性是无效的,也就是FireFox浏览器无论如何都不支持跨域资源的download属性下载。如果资源是同域名的,则两个浏览器都是畅通无阻的下载,不会出现下载变浏览器的情况。是否支持download属性的监测要监测档期那浏览器是否支持download属性,如下方法即可:
var isSuppportDownload=‘download’ in doacument.createElement('a');
三、总结
除了图片资源,我们还可以是PDF资源,或者txt资源等等。尤其是Chrome等浏览器可以直接打开PDF文件,使得此文件格式需要download处理的场景越来越普遍。这种HTML属性虽然很实用和方便,但是兼容性制约了我们大规模的应用。同时考虑到很多时候,需要进行一些下载的统计,纯前端的方式想要保存下载量数据,还是有些困难的,需要个开发配合才行,这样一来,还不如使用传统的方式来实现。
总之,我们可以先知道这个属性,静看后事如何。