随着前端技术的发展，越来越多的业务场景中需要前端来处理文件下载。在众多的方法中，通过
<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 浏览器中则不受此影响。
