浅析HTML5中的download属性使用

2020-04-22 07:37:57易采站长站整理

上述的方法可以实现同源资源的下载。但在很多场景中,还需要处理跨域资源。遗憾的是,

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
重置跨域资源的文件名,因此才会出现上述这种情况。

前后端配合完成文件下载的业务场景,一般是由后端设置响应头中的