&nbs p;
一、download属性是个什么鬼？
首先看下面这种截图：
如果我们想实现点击上面的下载按钮下载一张图片，你会如何实现？
我们可能会想到一个最简单的方法，就是直接按钮 a 标签链接一张图片，类似下面这样：
<a href="large.jpg">下载</a>
但是，想法虽好，实际效果却不是我们想要的，因为浏览器可以直接浏览图片，因此，我们点击下面的“下载”链接，并是不下载图片，而是在新窗口直接浏览图片。
下载
看我的眼睛，
于是，基本上，目前的实现都是放弃 HTML 策略，而是使用，例如php这样的 后端 语言，通过告知浏览器 header 信息，来实现下载。
header('Content -t y PE : image/jpeg'); header("Content-Dispos IT ion: attachment; filen am e='download. jpg '"); 然而，这种前后端都要操心的方式神烦，现在都流行前后端分离，还搅在一起太累了，感觉不会再爱了。
那有没有什么只需要前端动动指头就能实现下载的方式呢？有，就是本文要介绍的 download 属性。
例如，我们希望点击“下载”链接下载图片而不是浏览，直接增加一个 download 属性就可以：
<a hr ef="l arg e.jpg" download >下载</a>
没错，你没有看错，就这么结束了，不妨点击后面的链接试试：下载
结果在Ch rom e浏览器下（FireFox浏览器因为跨域限制无效）：
不仅如此，我们还可以指定下载图片的文件名：
<a href="index_ LOG o.gif" download="_5332_.gif" >下载</a>
如果 后缀名 一样，我们还可以缺省，直接文件名：
<a href="index_logo.gif" download="_5332_" >下载</a>
截图为虚，操作为实：下载
Chrome下的截图效果示意：
一个大写的酷里！
二、浏览器兼容性和跨域策略
兼容性如下图：
然而，caniuse展示的兼容性只是个笼统，根据鄙人的实地测试，事情要比看到的复杂。
主要表现在跨域策略的处理上，由于我手上没有IE13，所以，只能对比Chrome浏览器和FireFox浏览器：
如果需要下载的资 源 是跨域的，包括跨子域，在Chrome浏览器下，使用 download 属性是可以下载的，但是，并不能重置下载的文件的命名；而FireFox浏览器下，则 download 属性是无效的，也就是FireFox浏览器无论如何都不支持跨域资源的 download 属性下载。
而，如果资源是同域名的，则两个浏览器都是畅通无阻的下载，不会出现下载变浏览的情况。
是否 支持download属性的监测
要监测当前浏览器是否支持 download 属性，一行JS代码就可以了，如下：
VAR isSupportDownload = 'download' in document.createElement('a'); 三、结束语
除了图片资源，我们还可以是P DF 资源， 或者 txt资源 等等 。尤其Chrome等浏览器可以直接打开 PDF文件 ，使得此文件格式需要 download 处理的场景越来越普遍。
此HT ML 属性虽然非常实用和方便，但是兼容性制约了我们的大规模应用。
同时考虑到很多时候，需要进行一些下载的统计，纯前端的方式想要保存下载量数据，还是有些 吃 紧，需要跟开发的 同学 配合才行，还不如使用传统方法。
所以， download 属性的未来前景在哪里？当下是否可以直接加入到实际项目？还需要我们一起好好想想。其实使用JS实现 download 属性的polyfill并不难，但是，考虑到为何不所有浏览器都使用polyfill的方法，又 觉得 为了技 术 而技术是不太妥当的。
总之，先放着心上，再观察观察。
补充于2017-07-04
如果需求是直接使用JS触发浏览器的下载，可以看看这篇 文章 ：“使用JS让文本字符串作为html或 json文件 下载”。
（本篇完）
觉得可用，就经常来吧！ 欢迎评论哦！ html5教程 ，巧夺天工，精雕玉琢。小宝典献丑了！
总结
以上是 为你收集整理的 html5教程-了解HTML/HTML5中的download属性 全部内容，希望文章能够帮你解决 html5教程-了解HTML/HTML5中的download属性 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于html5教程-了解HTML/HTML5中的download属性的详细内容...