首先看下面这些截图：
如果我们想点击里面的下载按钮来下载一张图片，你会怎么做呢？
我们可能会想到一种最简单的方式，就是直接按a标签链接一张图片，类似如下：
下载
然而想法虽然好，但实际的疗效并不是我们想要的，因为浏览器可以直接浏览图片，所以我们点击“下载”链接，并没有下载图片，而是直接在新的浏览器中浏览图片。窗户。
所以，基本上，目前的实现方式是放弃HTML策略，而是使用php等前端语言，通过通知浏览器标头信息来实现下载。
header('内容类型：图像/jpeg');
header("内容配置：附件；文件名='下载.jpg'");
然而，前端和后端的这些形式都很烦人。 现在流行前后端分离，混在一起太累了。 我感觉我再也不会爱了。
那么有没有什么模式只需要在后端动动脚趾就可以完成下载呢？ 是的html5新属性，就是本文要介绍的下载属性。
例如，如果我们想点击“下载”链接下载图片而不是浏览，我们可以直接减少一个下载属性：
下载
是的，你没有看错，就是这样的结局
结果在Chrome浏览器下（FireFox浏览器因跨域限制无效）：
除此之外，我们还可以指定下载图片的文件名：
下载
如果后缀相同，我们也可以默认为直接文件名：
下载
截图是虚拟的，操作是真实的
Chrome下截图效果显示：
小写很酷！
2. 浏览器兼容性和跨域策略
然而，caniuse 所显示的兼容性只是广泛的。 根据弟弟的现场测试，事情比我看到的要复杂。
主要表现在跨域策略的处理上，因为我没有IE13，所以只能比较Chrome浏览器和FireFox浏览器：
如果要下载的资源是跨域的，包括跨子域的，在Chrome浏览器中，可以使用download属性进行下载，并且无法重置下载文件的名称； 在FireFox浏览器中，download属性无效，即FireFox浏览器无论如何都不支持跨域资源的download属性下载。
但如果资源是同一个域名html5新属性，两个浏览器就可以毫无阻碍地下载，不会出现下载变浏览的情况。
是否支持下载属性检测
检测当前浏览器是否支持下载属性，一行JS代码即可，如下：
varisSupportDownload='download'indocument.createElement('a');
三、结论
不光是图片资源，我们还可以是PDF资源，或者txt资源等等。 特别是Chrome等浏览器可以直接打开PDF文件，使得这种文件格式的下载变得越来越普遍。
这个HTML属性看起来特别有用和方便，兼容性却阻碍了我们的大规模应用。
同时考虑到次数很多，需要进行一些下载统计。 纯后端的方式保存下载数据还是有点紧。 需要和开发朋友配合，所以还是用传统的方法比较好。
那么，下载属性的未来在哪里？ 现在可以直接添加到实际项目中吗？ 我们也需要一起思考。 虽然使用JS实现下载属性的polyfill并不困难，但是考虑到为什么不是所有浏览器都使用polyfill技术，为了技术而使用技术并不合适。
其实先把心放在第一位，然后观察再观察。
【今日陌陌公众号推荐↓】
