HTML5中的download属性详解

一、download属性是个什么？

如果我们想实现点击上面的下载按钮下载一张图片，你会如何实现？

我们可能会想到一个最简单的方法，就是直接按钮a标签链接一张图片，类似下面这样：

但是，想法虽好，实际效果却不是我们想要的，因为浏览器可以直接浏览图片，因此，我们点击“下载”链接，并是不下载图片，而是在新窗口直接浏览图片。

于是，基本上，目前的实现都是放弃HTML策略，而是使用，例如php这样的后端语言，通过告知浏览器header信息，来实现下载。

header('Content-type: image/jpeg');

header("Content-Disposition: attachment; filename='download.jpg'");

然而，这种前后端都要操心的方式神烦，现在都流行前后端分离，还搅在一起太累了，感觉不会再爱了。

那有没有什么只需要前端动动指头就能实现下载的方式呢？有，就是本文要介绍的download属性。

例如，我们希望点击“下载”链接下载图片而不是浏览，直接增加一个download属性就可以：

没错，你没有看错，就这么结束了

结果在Chrome浏览器下（FireFox浏览器因为跨域限制无效）：

不仅如此，我们还可以指定下载图片的文件名：

如果后缀名一样，我们还可以缺省，直接文件名：

截图为虚，操作为实

Chrome下的截图效果示意：

一个大写的酷里！

二、浏览器兼容性和跨域策略

然而，caniuse展示的兼容性只是个笼统，根据鄙人的实地测试，事情要比看到的复杂。

主要表现在跨域策略的处理上，由于我手上没有IE13，所以，只能对比Chrome浏览器和FireFox浏览器：

如果需要下载的资源是跨域的，包括跨子域，在Chrome浏览器下，使用download属性是可以下载的，但是，并不能重置下载的文件的命名；而FireFox浏览器下，则download属性是无效的，也就是FireFox浏览器无论如何都不支持跨域资源的download属性下载。

而，如果资源是同域名的，则两个浏览器都是畅通无阻的下载，不会出现下载变浏览的情况。

是否支持download属性的监测

要监测当前浏览器是否支持download属性，一行JS代码就可以了，如下：

var isSupportDownload = 'download' in document.createElement('a');

三、结束语

除了图片资源，我们还可以是PDF资源，或者txt资源等等。尤其Chrome等浏览器可以直接打开PDF文件，使得此文件格式需要download处理的场景越来越普遍。

此HTML属性虽然非常实用和方便，但是兼容性制约了我们的大规模应用。

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html5/h17730.shtml