前端文件下载的实现方式

我们在项目开发过程中，经常会遇到下载、导出的功能，本文列举几种下载、导出的实现方式。

1、a 标签

<!-- 如果知道要下载的文件地址 -->
<a href="https://xxx.com/统计数据.xls" download="统计数据.xls">下载</a>

<!-- 如果后端提供了下载接口 -->
<a href="http://xxx.com/downloadApi">下载</a>

我们也可以通过js来实现a标签的下载功能：

const a = document.createElement('a')
a.href = 'https://xxx.com/统计数据.xls'
a.download = '统计数据.xls'
a.click()

使用a标签实现下载时的注意事项：

• a标签下载只能下载同源的文件，如果是跨域的文件（图片、音视频等媒体文件），都是预览，无法下载。
• download 属性的作用是指定下载的文件名，如果不指定，那么下载的文件名就会根据请求内容的 Content-Disposition 来确定，如果没有 Content-Disposition，那么就会使用请求的URL的最后一部分作为文件名。

2、window.open

window.open('https://xxx.com/统计数据.xls', '_blank', 'download=统计数据.xls')

相比于a标签的缺陷，这种方式不能下载 .html、.htm、.xml、.xhtml 等文件，因为这些文件会被当成html文件来处理，所以会直接在当前页面打开。

同样也不能下载跨域的文件。

3、location.href

跟 window.open 类似。

4、XMLHttpRequest

const xhr = new XMLHttpRequest()
xhr.open('GET', 'http://xxx.com/downloadApi')
xhr.send()

xhr.onload = function () {
  const blob = new Blob([xhr.response], { type: 'text/html' })
  const a = document.createElement('a')
  a.href = URL.createObjectURL(blob)
  a.download = '统计数据.xls'
  a.click()
}

这里的主要逻辑是：

1. 请求接口拿到响应数据 response，就是要下载的内容
2. 再把下载内容转换成 blob 对象
3. 然后通过 URL.createObjectURL 来创建一个url
4. 最后使用a标签进行下载

当然 href 的值也可以设置成 base64 格式的内容：

<a download="统计数据.xls" href="data:text/txt;charset=utf-8,download Test Data">下载</a> 

总结

上面的这么多方案，不管是通过浏览器的内置行为进行下载，还是通过ajax进行下载，文件下载的最终还是浏览器的行为。