上述的方法可以实现同源资源的下载。但在很多场景中,还需要处理跨域资源。遗憾的是,
download 属性目前仅适用于 同源 URL ,即如果需要下载的资源地址是跨域的,
download 属性就会失效,点击链接会变成导航预览。测试:点击下载,结果只是预览而无法下载图片。
注: Chrome65 之前是支持
download 属性触发文件跨域下载的,之后则严格遵循同源策略,无法再通过
download 属性触发跨域资源的下载。而 FireFox 一直不支持跨域资源的
download 属性下载。文件命名问题
download 属性不仅可以触发下载,也能指定下载文件名:
<a href="test.png" download="joker.png">下载</a>如果下载文件的后缀与源文件保持一致,可以设置缺省文件名:
<a href="test.png" download="joker">下载</a>笔者曾遇到过一个问题,通过
<a> 标签触发跨域资源下载,代码与上述的 download 方法基本相同,只是在设置
download 属性的地方有点不同:
a.setAttribute(download, true)结果在老版本的 Chrome 浏览器中出现了如下情况。

下载文件名成了
true 。很明显,浏览器将
download 属性值读成了文件名。经过分析,出现上述问题主要是因为:
1. 首先本不该将
download 设为
true ,
download 与
disabled 这种类型的属性值不同,它与文件名直接相关联。而且对于这种前后端响应式下载的方式,
download 属性并不是必要的。2. 在 Chrome 的早期版本不仅支持跨域资源的
download 属性下载,而且还可以通过
download 重置跨域资源的文件名,因此才会出现上述这种情况。前后端配合完成文件下载的业务场景,一般是由后端设置响应头中的









