1.下载属性是什么？

如果我们想通过点击上面的下载按钮来下载一张图片，你会怎么做？

我们可能会想到一个最简单的方法，就是直接点击A标签链接一张图片，如下图：

A href='large.jpg '下载/a

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

所以，基本上，目前的实现是放弃HTML策略，而是使用php等后端语言，通过告诉浏览器头信息来下载。

标题(' Content-type : image/JPEG ')；

标题('内容-处置：附件；filename=' download . jpg ' ')；

但是，这种担心前端和后端的方式很烦人。现在流行分前后端，聚在一起太累，感觉不会再爱了。

有什么方法可以只通过在前端移动手指来下载？是的，就是本文要介绍的下载属性。

比如我们想点击“下载”链接下载图片而不是浏览。只需添加一个下载属性：

A href='large.jpg '下载下载/a

是的，你没看错。结束了

结果在Chrome浏览器(FireFox浏览器因跨域限制无效):

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

a href=' index _ logo . gif ' download=' _ 5332 _。“gif”下载/a

如果后缀名称相同，我们也可以默认为直接文件名：

a href=' index _ logo . gif ' download=' _ 5332 _ ' download/a

截图是虚拟的，操作是真实的

Chrome下的截图效果：

首都一个很酷的！

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

但是caniuse演示的兼容性只是一般，根据我的实地测试，事情比我看到的要复杂。

主要在跨域策略处理上，因为我没有IE13，所以只能对比Chrome浏览器和FireFox浏览器：

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

但是如果资源是同一个域名，两个浏览器都可以畅通无阻的下载，从下载到浏览不会有什么变化。

是否支持监控下载属性

要监控当前浏览器是否支持下载属性，一行JS代码就足够了，如下所示：

var isSupportDownload=' download ' in document . create element(' a ')；

三.结束语

除了图片资源，我们还可以是PDF资源，txt资源等等。特别是Chrome等浏览器可以直接打开PDF文件，这使得这种文件格式被下载的情况越来越普遍。

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