|
随着前端技术的发展，越来越多的业务场景中必须前端来处理文件下载。在众多的办法中，经过<a>标签的 download 属性实现下载是其中平常亦是比较简单的一种办法。
download 属性介绍
常规的<a>标签经过 href 实现链接转，倘若只想下载文件而不是转预览，最好的方式是在<a>标签中添加download属性，就能很简单地实现下载操作。
download是 HTML5 中<a>标签新增的一个属性，此属性会强制触发下载操作，指示浏览器下载 URL 而不是导航到它，并提示用户将其保留为本地文件，例如：
<a href="result.png" download>download</a>
倘若缺少download属性，点击 "download" 会直接变成预览照片，当添加download属性后则会触发照片的下载。
日前download属性的兼容性如 caniuse 中所展示的：
能够以看到，大部分主流的浏览器基本都已然支持 download属性，而 IE 的表现一如既往的感人，日前许多 Window 系统仍然在运用 IE ，这亦是许多业务需求必须思虑的。这种兼容性问题限制了 download 的更广泛应用。
动态资源下载
面对有些动态内容下载的业务场景，即照片等资源的位置并不是固定的（例如有些在线绘图工具所生成的照片），只运用 HTML 没法满足需求。为了能够满足区别的 URL 下载，能够经过JS 实现一个动态触发 URL 下载的办法。
function download(href, filename=) {
const a = document.createElement(a)
a.download = filename
a.href = href
document.body.appendChild(a)
a.click()
a.remove()
}
必须重视的是，代码中对创建的<a> 进行的 appendChild 和 remove 操作重点是为了兼容 FireFox 浏览器，在 FireFox 浏览器下调用该办法倘若不将创建的<a>标签添加到 body 里，点击链接不会有任何反应，没法触发下载，而在 Chrome 浏览器中则不受此影响。
以上的办法能够实现同源资源的下载。但在非常多场景中，还必须处理跨域资源。遗憾的是，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属性的地区有点
| 
发表于 2024-6-29 16:27:55
