问题

我们在后台管理系统开发的过程中，时常会遇到下载文件的需求。当我第一次遇到这个问题的时候，我的的心里活动是“这多简单，动态创建a标签，直接模拟点击后下载”。一开始是没有问题的，做着做着就有一些疑问：

• 如何知道下载文件进度？
• 如何知道下载是否成功？

这些都是直接动态创建a标签无法解决的

解决方案

在研究过网上不少方案下，总结了一套适合自己的方法：

通过 fetch 去请求后端给的url（当然也可以是axios），然后返回数据通过 blob() 去创建Blob对象，再走常规的动态创建a标签流程即可实现下载功能。

const ele = document.createElement('a')
fetch(url).then(r => {
    r.blob().then(blob => {
      const href = URL.createObjectURL(blob)
    ele.href = href
    ele.download = ''
    ele.click()
    URL.revokeObjectURL(href)
  })
})

如何控制下载状态

可以使用Promise实现

function download () {
  return new Promise((resolve, reject) => {
    fetch(url).then(r = {
      resolve()
    })
  })
}
download().then(() => {
    console.log('success !') 
})

如此一来，就可以在外部控制下载的状态，加强了用户体验。