JavaScript 实现下载文件

下载文件，是一个常见的业务需求。在之前的印象里，下载都是通过一个额外的页面去访问一个文件地址来实现的。现在，HTML5 为 <a> 标签提供了一个 download 属性，方便实现下载功能。

1. H5： a 标签 download 属性

<a href="demo.jpg" download>下载</a>

• 当点击 a 标签后，便可以自动下载到本地，而不会跳转链接。
• download 属性值可选，如果定义后，则该值为下载的文件名；不定义则自动从 href 属性中自动取值命名。

2. JS 实现download

其实就是借助了 H5 中 a 标签的 download 新特性，

• 步骤如下：

1> 利用 JS 创建 一个 <a> 标签
2> 设置 <a> 标签的 href 属性 & download 属性
3> 触发 a 标签的 click 事件

• 代码如下：

// GetFileOrigin 为获取文件的api
const GetFileOrigin = async () => {
  const res = await fetch('http://demo')
  return res
}

const blob = await GetFileOrigin().then(res => res.blob()) 
const a = document.createElement('a')
a.href = window.URL.createObjectURL(blob)
a.download = 'demo.jpg'
a.click()

这篇文章只是总结了本人在开发过程中遇到的方法，还有很多内部原理没有总结，推荐以下的参考资料，帮助理解。
Body.blob()
浅析 HTML5 中的 download 属性
如何用 JavaScript 下载文件
JS 实现触发下载内容(H5 download)