html5新属性 download

今天无意中了解到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属性虽然很实用和方便，但是兼容性制约了我们大规模的应用。同时考虑到很多时候，需要进行一些下载的统计，纯前端的方式想要保存下载量数据，还是有些困难的，需要个开发配合才行，这样一来，还不如使用传统的方式来实现。

总之，我们可以先知道这个属性，静看后事如何。